Wepress

Appearance

前端系统中，怎么统一处理登录态过期的场景？ ​

统一处理登录态过期的场景可以通过以下几个步骤实现：

1. 拦截请求响应，检查状态码 ​

  • 实现思路：在发送请求或接收响应时进行拦截，通过 HTTP 状态码或后端自定义的错误码判断用户的登录状态是否过期。例如，后端可以返回 401（Unauthorized）状态码，表示需要重新登录。
  • 具体实现：使用 Axios 或 Fetch 进行请求拦截，例如 Axios 提供的 interceptors 可以在所有请求或响应的入口处检查状态，遇到 401 统一跳转登录。

示例代码（使用 Axios 拦截器）：

javascript
import axios from 'axios';
import { redirectToLogin } from './auth'; // 定义重定向到登录页的函数

axios.interceptors.response.use(
  response => response, // 正常响应
  error => {
    if (error.response && error.response.status === 401) {
      // 登录态过期处理
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

2. 封装统一的请求方法 ​

  • 实现思路：封装一个通用的 request 方法，用于管理所有 API 请求，并在该方法中统一处理登录态过期问题。当遇到过期状态码时，集中处理跳转逻辑或刷新令牌。
  • 具体实现：封装后的 request 方法可以统一管理拦截器逻辑，并添加登录态过期的逻辑判断。

示例代码：

javascript
async function request(url, options) {
  try {
    const response = await fetch(url, options);
    if (response.status === 401) {
      redirectToLogin(); // 重定向到登录
      return;
    }
    return await response.json();
  } catch (error) {
    console.error('请求失败:', error);
  }
}

3. 使用 Token 续期机制 ​

  • 实现思路：采用 Token 刷新机制，在前端存储 accessToken 和 refreshToken，如果 accessToken 过期，则调用刷新接口获取新的 accessToken，避免用户频繁跳转到登录页。
  • 具体实现：当遇到 401 错误时，可以调用刷新接口更新 accessToken。若刷新失败，再跳转至登录页。

示例代码：

javascript
axios.interceptors.response.use(
  response => response,
  async error => {
    const { response } = error;
    if (response.status === 401) {
      try {
        const refreshResponse = await axios.post('/refresh-token', {
          refreshToken: localStorage.getItem('refreshToken')
        });
        localStorage.setItem('accessToken', refreshResponse.data.accessToken);
        error.config.headers['Authorization'] = `Bearer ${refreshResponse.data.accessToken}`;
        return axios(error.config);
      } catch (refreshError) {
        redirectToLogin();
      }
    }
    return Promise.reject(error);
  }
);

4. 用户操作超时自动登出 ​

  • 实现思路：设置用户不活跃超时时间，如果用户在指定时间内无操作，则触发登出操作，清除登录态并跳转到登录页面。
  • 具体实现：可以在全局监听 mousemove、keydown 等事件，重置倒计时。倒计时结束触发登录态过期逻辑。

示例代码：

javascript
let timeoutId;
const logoutAfterTimeout = () => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    alert('登录超时，请重新登录');
    redirectToLogin();
  }, 30 * 60 * 1000); // 30 分钟超时
};

window.addEventListener('mousemove', logoutAfterTimeout);
window.addEventListener('keydown', logoutAfterTimeout);

5. 重定向至原页面 ​

  • 实现思路：用户被重定向至登录页后，登录成功应自动跳转回之前试图访问的页面。
  • 具体实现：记录用户访问的页面 URL，作为参数传递给登录页。登录后根据该 URL 重定向回原页面，提升用户体验。

示例代码：

javascript
function redirectToLogin() {
  const currentPath = window.location.pathname;
  window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`;
}

题目要点： ​

通过拦截请求、Token 刷新、用户超时退出、原页面重定向等策略，前端可以统一、友好地处理登录态过期场景，避免用户频繁登录，同时提高系统的安全性和用户体验。