告别频繁登录：教你用Axios实现无感知双Token刷新

一、问题背景：为何需要双Token刷新机制？

在前后端分离架构中，JWT（JSON Web Token）已成为主流认证方案。但传统单Token模式存在两大痛点：

Token过期中断：当Access Token过期时，用户必须重新登录，尤其在移动端场景体验极差
Refresh Token安全隐患：单Refresh Token机制存在被窃取风险，且无法区分主动注销和被动过期

双Token机制通过引入短期Access Token和长期Refresh Token的组合，有效解决上述问题：

Access Token（短期）：用于常规API请求，有效期短（如15分钟）
Refresh Token（长期）：用于获取新Access Token，有效期长（如7天），且可设置单设备绑定

二、Axios拦截器：实现无感知刷新的核心工具

Axios的请求/响应拦截器是实现自动刷新的关键，其工作原理如下：

1. 请求拦截器：Token自动注入

// 创建axios实例
const api = axios.create({
  baseURL: 'https://api.example.com'
});
// 请求拦截器
api.interceptors.request.use(
  config => {
    const accessToken = localStorage.getItem('accessToken');
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

2. 响应拦截器：401错误处理

当收到401未授权响应时，拦截器需：

检查是否存在Refresh Token
调用刷新接口获取新Token
重试原始请求
更新本地存储的Token

三、完整实现方案：三步构建无感知刷新

1. Token存储与初始化

// Token存储工具类
class TokenManager {
  static setTokens(accessToken, refreshToken) {
    localStorage.setItem('accessToken', accessToken);
    localStorage.setItem('refreshToken', refreshToken);
    // 可选：设置过期时间
    localStorage.setItem('tokenExpiry', Date.now() + 15 * 60 * 1000);
  }
  static clearTokens() {
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    localStorage.removeItem('tokenExpiry');
  }
}

2. 刷新逻辑实现

// 刷新Token的API
async function refreshToken() {
  const refreshToken = localStorage.getItem('refreshToken');
  try {
    const response = await axios.post('/auth/refresh', {
      refreshToken: refreshToken
    });
    TokenManager.setTokens(
      response.data.accessToken,
      response.data.refreshToken
    );
    return response.data.accessToken;
  } catch (error) {
    TokenManager.clearTokens();
    throw error;
  }
}

3. 响应拦截器完整实现

let isRefreshing = false;
let subscribers = [];
api.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    // 处理401错误
    if (error.response.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        // 已有刷新请求在进行中，等待结果
        return new Promise(resolve => {
          subscribers.push(token => {
            originalRequest.headers.Authorization = `Bearer ${token}`;
            resolve(axios(originalRequest));
          });
        });
      }
      originalRequest._retry = true;
      isRefreshing = true;
      try {
        const newAccessToken = await refreshToken();
        // 通知所有等待的请求
        subscribers.forEach(cb => cb(newAccessToken));
        subscribers = [];
        // 重试原始请求
        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
        return axios(originalRequest);
      } catch (refreshError) {
        TokenManager.clearTokens();
        // 可选：跳转到登录页
        window.location.href = '/login';
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false;
      }
    }
    return Promise.reject(error);
  }
);

四、高级优化方案

1. Token过期预检测

通过存储Token过期时间，可提前刷新避免401错误：

function checkTokenExpiration() {
  const expiry = localStorage.getItem('tokenExpiry');
  if (expiry && Date.now() > expiry - 60000) { // 提前1分钟刷新
    return refreshToken().catch(() => {});
  }
  return Promise.resolve();
}
// 在应用初始化时调用
checkTokenExpiration();

2. 多设备管理

在Refresh Token中存储设备指纹，防止跨设备滥用：

// 生成设备指纹
const deviceId = localStorage.getItem('deviceId') || 
  require('crypto').randomUUID();
localStorage.setItem('deviceId', deviceId);
// 刷新时携带设备信息
async function refreshToken() {
  const response = await axios.post('/auth/refresh', {
    refreshToken: localStorage.getItem('refreshToken'),
    deviceId: localStorage.getItem('deviceId')
  });
  // ...
}

3. 并发请求处理优化

上述方案中，当多个请求同时遇到401时，会触发多次刷新。改进方案：

let refreshPromise = null;
api.interceptors.response.use(
  // ...
  error => {
    // ...
    if (error.response.status === 401) {
      if (!refreshPromise) {
        refreshPromise = refreshToken().finally(() => {
          refreshPromise = null;
        });
      }
      return refreshPromise.then(newToken => {
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return axios(originalRequest);
      });
    }
    // ...
  }
);

五、安全注意事项

HTTPS强制：所有Token传输必须使用HTTPS
Refresh Token有效期：建议设置7-30天有效期
设备绑定：重要系统应绑定设备指纹
注销处理：后端需实现Refresh Token黑名单机制
CSRF防护：结合CSRF Token使用

六、实施效果评估

实施双Token刷新机制后，可获得以下收益：

用户体验提升：用户操作中断率降低90%以上
安全性增强：即使Access Token泄露，攻击窗口仅15分钟
运维成本降低：减少因Token过期导致的客服咨询
系统稳定性提高：避免因频繁登录导致的接口洪峰

七、常见问题解决方案

Q1：刷新时出现”Invalid Refresh Token”错误

检查后端是否实现了Refresh Token黑名单
确认前端存储的Refresh Token是否被篡改
检查设备指纹是否匹配

Q2：移动端网络切换导致刷新失败

增加重试机制（最多3次）
实现离线Token缓存策略
添加友好的网络错误提示

Q3：如何测试Token刷新逻辑？

使用Postman模拟401响应
手动修改本地存储的Token过期时间
编写单元测试验证拦截器行为

八、总结与展望

通过Axios拦截器实现的无感知双Token刷新机制，有效解决了JWT认证中的体验与安全矛盾。该方案具有以下优势：

完全透明：用户无感知完成Token刷新
高可用性：支持并发请求和错误恢复
安全可控：结合设备绑定和有效期管理
易于集成：可适配任何JWT后端服务

未来可进一步探索：

基于WebAuthn的无密码认证
生物特征识别的Token管理
分布式Session与JWT的混合模式

通过实施本方案，开发者可以显著提升系统的用户体验和安全性，为构建高可用、低摩擦的认证系统提供坚实基础。

如何告别频繁登录？Axios实现无感知双Token刷新全攻略