优化前端用户体验之：token无感刷新指南

前端

2024-01-29 10:00:38

无感令牌刷新：无缝用户体验的秘诀

1. 什么是无感令牌刷新？

无感令牌刷新是一种幕后机制，当令牌过期时，它会自动生成新的令牌，从而让用户在不知不觉中继续使用系统。这种机制消除了手动重新登录的繁琐步骤，从而增强了用户体验。

2. 为什么需要无感令牌刷新？

无感令牌刷新对于提供无缝用户体验至关重要，具体来说：

提高用户便利性： 用户不必中断他们的操作或返回登录页面，从而免除了额外的麻烦。
提升安全性： 通过消除手动重新登录的需要，无感令牌刷新减少了网络钓鱼和恶意软件攻击的风险，从而提高了系统的整体安全性。

3. 实施无感令牌刷新的步骤

要实施无感令牌刷新，请遵循以下步骤：

搭建 Axios 骨架

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

封装 AJAX 接口

// 获取令牌接口
const getToken = () => {
  return instance.post('/auth/login', {
    username: 'admin',
    password: '123456',
  });
};

// 需要令牌发送 AJAX 的接口
const getUserInfo = () => {
  return instance.get('/user/info');
};

在需要令牌的接口中进行令牌刷新

// 在需要令牌的接口中添加拦截器
instance.interceptors.request.use(
  (config) => {
    // 检查令牌是否过期
    const token = localStorage.getItem('token');
    if (token && isTokenExpired(token)) {
      // 令牌已过期，刷新令牌
      return getToken().then((res) => {
        // 更新令牌
        localStorage.setItem('token', res.data.token);
        // 将新的令牌添加到请求头
        config.headers['Authorization'] = `Bearer ${res.data.token}`;
        return config;
      });
    }
    return config;
  }
);

在响应拦截器中处理令牌过期的错误

// 在响应拦截器中处理令牌过期的错误
instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 检查错误是否为令牌过期
    if (error.response && error.response.status === 401) {
      // 令牌已过期，刷新令牌
      return getToken().then((res) => {
        // 更新令牌
        localStorage.setItem('token', res.data.token);
        // 重试请求
        return instance(error.config);
      });
    }
    return Promise.reject(error);
  }
);