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

一、问题背景：JWT认证的痛点

在前后端分离架构中，JWT（JSON Web Token）因其无状态特性成为主流认证方案。但传统单Token设计存在致命缺陷：当Access Token过期时，用户必须重新登录获取新Token。这种中断式认证体验严重影响用户体验，尤其在移动端场景下更为突出。

典型问题场景：

• 用户填写长表单时突然提示Token过期
• 支付流程进行到关键步骤被迫中断
• 移动端APP频繁弹出登录窗口

二、双Token设计原理

1. Token分类

• Access Token：短期有效（如15分钟），用于访问受保护资源
• Refresh Token：长期有效（如7天），用于获取新的Access Token

2. 工作流程

sequenceDiagram
    Client->>Server: 首次登录（获取双Token）
    Server-->>Client: 返回Access Token + Refresh Token
    Client->>Server: 使用Access Token访问API
    Server-->>Client: 返回数据
    Client->>Server: Access Token过期
    Server-->>Client: 返回401未授权
    Client->>Server: 使用Refresh Token获取新Access Token
    Server-->>Client: 返回新Access Token
    Client->>Server: 重试原API请求

3. 安全性设计

• Refresh Token存储在HttpOnly Cookie中
• 每次刷新生成新Token对，旧Refresh Token立即失效
• 限制Refresh Token使用次数（如最多5次）

三、Axios拦截器实现方案

1. 基础配置

import axios from 'axios';
const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  }
});

2. 请求拦截器（添加Token）

apiClient.interceptors.request.use(
  (config) => {
    const accessToken = localStorage.getItem('accessToken');
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

3. 响应拦截器（处理Token过期）

apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    // 仅处理401错误且未重试过的请求
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        const refreshToken = getCookie('refreshToken'); // 从Cookie获取
        const { data } = await axios.post('/auth/refresh', { refreshToken });
        // 更新Token
        localStorage.setItem('accessToken', data.accessToken);
        // 重试原请求
        return apiClient(originalRequest);
      } catch (refreshError) {
        // 刷新失败，跳转到登录页
        window.location.href = '/login';
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

四、完整实现示例

1. 登录逻辑

const handleLogin = async (credentials) => {
  try {
    const response = await apiClient.post('/auth/login', credentials);
    // 存储Token
    localStorage.setItem('accessToken', response.data.accessToken);
    document.cookie = `refreshToken=${response.data.refreshToken}; path=/; Secure; HttpOnly; SameSite=Strict`;
    // 设置定时器提前刷新（可选）
    const expiresIn = response.data.expiresIn;
    setTimeout(() => refreshTokenSilently(), expiresIn * 1000 - 30000); // 提前30秒刷新
  } catch (error) {
    console.error('登录失败:', error);
  }
};

2. 静默刷新实现

const refreshTokenSilently = async () => {
  const refreshToken = getCookie('refreshToken');
  if (!refreshToken) return;
  try {
    const { data } = await axios.post('/auth/refresh', { refreshToken });
    localStorage.setItem('accessToken', data.accessToken);
    // 更新后续请求的Token
    axios.defaults.headers.common['Authorization'] = `Bearer ${data.accessToken}`;
  } catch (error) {
    console.error('Token刷新失败:', error);
    // 可选：强制登出
  }
};

五、最佳实践与注意事项

1. 安全建议

• Refresh Token必须使用HttpOnly Cookie存储
• 启用CSRF保护机制
• 实现Token黑名单机制（可选）
• 定期更换Refresh Token密钥

2. 性能优化

• 设置合理的Token过期时间（Access Token 15-30分钟，Refresh Token 7-30天）
• 避免频繁刷新Token（建议提前30秒刷新）
• 实现Token缓存机制，减少重复刷新

3. 错误处理

• 区分Token过期和其他401错误
• 实现优雅的降级方案（如展示友好提示）
• 记录Token刷新失败事件用于监控

六、扩展方案：多实例管理

对于大型应用，建议创建多个Axios实例：

// 认证相关实例
const authClient = axios.create({
  baseURL: '/auth',
  withCredentials: true // 必须启用以发送Cookie
});
// API请求实例
const apiClient = axios.create({
  baseURL: '/api',
  timeout: 10000
});
// 为每个实例配置独立的拦截器

七、测试策略

1. 单元测试示例

test('should refresh token on 401 error', async () => {
  // 模拟401响应
  axios.get.mockResolvedValueOnce({ response: { status: 401 } });
  // 模拟成功的refreshToken
  axios.post.mockResolvedValueOnce({ 
    data: { accessToken: 'new-token' } 
  });
  // 执行测试
  const result = await refreshTokenHandler();
  // 验证
  expect(axios.post).toHaveBeenCalledWith('/auth/refresh', { 
    refreshToken: expect.any(String) 
  });
  expect(localStorage.setItem).toHaveBeenCalledWith('accessToken', 'new-token');
});

2. 集成测试要点

• 测试Token过期场景
• 测试Refresh Token失效场景
• 测试并发请求时的Token刷新

八、常见问题解决方案

1. 问题：刷新时出现并发请求

解决方案：使用请求队列或锁机制

let isRefreshing = false;
let subscribers = [];
apiClient.interceptors.response.use(
  response => response,
  error => {
    const { config, response } = error;
    if (response?.status === 401) {
      if (!isRefreshing) {
        isRefreshing = true;
        refreshToken().then(newToken => {
          subscribers.forEach(cb => cb(newToken));
          subscribers = [];
        });
      }
      return new Promise(resolve => {
        subscribers.push(accessToken => {
          config.headers.Authorization = `Bearer ${accessToken}`;
          resolve(apiClient(config));
        });
      });
    }
    return Promise.reject(error);
  }
);

2. 问题：移动端Cookie存储限制

解决方案：

• 对于不支持Cookie的移动端，使用加密的本地存储
• 实现短期有效的Refresh Token（如1小时）
• 结合设备指纹增强安全性

九、总结与展望

通过双Token机制和Axios拦截器的结合，我们实现了：

1. 用户无感知的Token自动刷新
2. 显著减少的登录中断次数
3. 增强的系统安全性

未来演进方向：

• 引入OAuth 2.0设备授权流
• 实现基于生物特征的持续认证
• 探索无Token的认证方案（如WebAuthn）

这种实现方案已在多个生产环境验证，能够有效提升用户留存率和系统安全性。开发者可根据实际需求调整Token有效期和刷新策略，构建最适合自己业务的认证体系。