Soybean Admin 项目中登录过期弹窗重复出现问题的分析与解决

问题背景

在 Soybean Admin 项目（一个基于 Vue 的管理系统框架）的使用过程中，开发者反馈了一个关于登录状态管理的异常现象：当用户会话过期后访问需要权限的路由时，系统会连续弹出两个登录过期的提示窗口。这种情况不仅影响了用户体验，也暴露了前端请求拦截逻辑中的潜在问题。

问题现象详细描述

当用户处于已登录状态但后端会话已过期的情况下，如果用户点击某个需要权限验证的路由，该路由页面在初始化时会同时发起两个不同的 API 请求。由于会话已过期，后端会对这两个请求都返回未授权的响应，导致前端连续弹出两个登录过期提示框。

技术分析

前端请求拦截机制

在现代前端框架中，通常会使用 axios 等 HTTP 客户端配合拦截器(interceptors)来处理全局的请求和响应。在 Soybean Admin 项目中，应该已经实现了以下机制：

1. 请求拦截器：在发送请求前检查本地 token 是否存在并附加到请求头
2. 响应拦截器：检查响应状态码，对 401 未授权状态进行统一处理

问题根源

出现重复弹窗的根本原因在于：

1. 并发请求处理不足：当多个请求同时发出且都收到 401 响应时，当前的拦截器逻辑没有对这种情况进行合并处理
2. 状态管理缺失：没有在全局状态中维护"正在处理登录过期"的标志位
3. 路由守卫与请求拦截的协调问题：可能路由守卫和页面组件内的请求都在独立进行权限验证

解决方案

方案一：全局请求队列管理

实现一个全局的请求队列和状态标志：

let isRefreshing = false;
let failedQueue = [];

const processQueue = (error) => {
  failedQueue.forEach(prom => {
    if (error) {
      prom.reject(error);
    } else {
      prom.resolve();
    }
  });
  failedQueue = [];
};

axios.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;
    
    if (error.response.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        }).then(() => {
          return axios(originalRequest);
        }).catch(err => {
          return Promise.reject(err);
        });
      }
      
      originalRequest._retry = true;
      isRefreshing = true;
      
      // 显示统一的登录过期提示
      showSessionExpiredModal();
      
      return new Promise((resolve, reject) => {
        // 这里可以添加重新登录逻辑
        // 登录成功后
        isRefreshing = false;
        processQueue(null);
        resolve(axios(originalRequest));
      }).catch(error => {
        processQueue(error);
        return Promise.reject(error);
      });
    }
    
    return Promise.reject(error);
  }
);

方案二：基于状态管理的解决方案

利用 Vuex 或 Pinia 等状态管理工具：

1. 在 store 中维护一个 sessionExpired 状态
2. 在响应拦截器中首次收到 401 时设置该状态并显示弹窗
3. 后续请求检查该状态，如果已过期则直接拒绝不发送请求

方案三：防抖处理登录提示

对登录过期的提示框显示逻辑添加防抖处理：

let showModalDebounce = null;

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      if (!showModalDebounce) {
        showModalDebounce = setTimeout(() => {
          showSessionExpiredModal();
          showModalDebounce = null;
        }, 100);
      }
    }
    return Promise.reject(error);
  }
);

最佳实践建议

1. 统一错误处理中心：建议项目中建立一个集中的错误处理模块，所有 API 错误都通过该模块处理
2. 请求取消机制：对于并发请求，可以使用 axios 的 CancelToken 取消后续请求
3. 用户状态管理：在用户登录状态变化时，及时更新全局状态并通知所有组件
4. 路由守卫优化：在路由级别做好权限验证，避免页面加载时重复验证

总结

登录状态管理是后台管理系统中的核心功能之一，Soybean Admin 项目中出现的重复弹窗问题反映了在并发请求处理和全局状态协调方面的不足。通过实现请求队列、状态管理或防抖机制，可以有效解决这一问题。这不仅提升了用户体验，也使代码更加健壮和可维护。建议开发者在类似项目中重视全局状态的一致性管理，建立完善的错误处理机制，确保系统在各种边界条件下都能表现稳定。