基于Axios的双Token无感刷新实现指南

在前后端分离架构中，Token认证机制已成为主流方案。然而单Token设计在续期时需用户重新登录，严重影响用户体验。本文将深入探讨如何基于Axios封装双Token（Access Token + Refresh Token）无感刷新机制，实现认证令牌的无缝续期。

一、双Token机制核心原理

1.1 认证体系架构

双Token体系包含两种核心令牌：

Access Token：短期有效（通常15-30分钟），用于API请求认证
Refresh Token：长期有效（7-30天），用于获取新的Access Token

这种设计既保障安全性（缩短Access Token有效期），又提升用户体验（通过Refresh Token自动续期）。

1.2 无感刷新实现要点

实现无感刷新需解决三大技术挑战：

Token过期检测：精准识别401未授权响应
并发请求控制：防止多个请求同时触发刷新
续期失败处理：优雅处理Refresh Token失效场景

二、Axios封装核心实现

2.1 基础封装结构

class TokenManager {
  constructor(options) {
    this.accessToken = null;
    this.refreshToken = null;
    this.refreshing = false;
    this.refreshQueue = [];
    this.axiosInstance = axios.create(options);
    // 初始化拦截器
    this.setupInterceptors();
  }
  // 其他方法实现...
}

2.2 请求拦截器实现

setupInterceptors() {
  // 请求拦截器：自动添加Access Token
  this.axiosInstance.interceptors.request.use(config => {
    if (this.accessToken) {
      config.headers.Authorization = `Bearer ${this.accessToken}`;
    }
    return config;
  }, error => Promise.reject(error));
  // 响应拦截器：处理401错误
  this.axiosInstance.interceptors.response.use(
    response => response,
    async error => {
      const { response } = error;
      if (response?.status === 401) {
        return this.handleTokenRefresh(error.config);
      }
      return Promise.reject(error);
    }
  );
}

2.3 并发控制机制

async handleTokenRefresh(originalRequest) {
  if (!this.refreshing) {
    this.refreshing = true;
    try {
      const response = await this.refreshTokens();
      this.updateTokens(response.data);
      // 重放所有等待的请求
      this.refreshQueue.forEach(cb => cb());
      this.refreshQueue = [];
      return this.axiosInstance(originalRequest);
    } catch (refreshError) {
      this.handleRefreshError();
      return Promise.reject(refreshError);
    } finally {
      this.refreshing = false;
    }
  } else {
    // 等待当前刷新完成
    return new Promise(resolve => {
      this.refreshQueue.push(() => {
        resolve(this.axiosInstance(originalRequest));
      });
    });
  }
}

三、完整实现方案

3.1 初始化配置

const tokenManager = new TokenManager({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  refreshEndpoint: '/auth/refresh'
});
// 设置初始Token
tokenManager.setTokens({
  accessToken: 'initial_access_token',
  refreshToken: 'initial_refresh_token'
});

3.2 核心方法实现

class TokenManager {
  // ...前文代码...
  async refreshTokens() {
    return this.axiosInstance.post(this.refreshEndpoint, {
      refreshToken: this.refreshToken
    });
  }
  updateTokens({ accessToken, refreshToken }) {
    this.accessToken = accessToken;
    this.refreshToken = refreshToken;
    // 持久化存储逻辑...
  }
  setTokens({ accessToken, refreshToken }) {
    this.accessToken = accessToken;
    this.refreshToken = refreshToken;
  }
  handleRefreshError() {
    // 清除无效Token
    this.accessToken = null;
    this.refreshToken = null;
    // 触发登录重定向等逻辑...
  }
}

3.3 使用示例

// 发起API请求
tokenManager.axiosInstance.get('/protected/resource')
  .then(response => console.log(response.data))
  .catch(error => console.error('请求失败:', error));
// 手动刷新Token（可选）
tokenManager.refreshTokens()
  .then(() => console.log('Token刷新成功'))
  .catch(error => console.error('刷新失败:', error));

四、最佳实践与优化建议

4.1 安全性增强措施

Token存储方案：
- 使用HttpOnly Cookie存储Refresh Token
- Access Token可存储在内存或安全存储中
- 避免使用localStorage存储敏感Token
刷新端点设计：
- 限制刷新频率（如每分钟最多3次）
- 记录Refresh Token使用日志
- 实现Refresh Token黑名单机制

4.2 性能优化策略

预加载机制：在Access Token即将过期时主动刷新

// 检查Token剩余有效期
function checkTokenExpiry() {
const expiresIn = parseJwt(this.accessToken).exp - Date.now()/1000;
if (expiresIn < 300) { // 5分钟前刷新
 this.refreshTokens().catch(/* 静默处理 */);
}
}

请求缓冲优化：
- 对并发请求进行节流处理
- 优先处理关键业务请求

4.3 错误处理机制

分级错误处理：
- 401未授权：触发Token刷新
- 403禁止访问：直接拒绝请求
- 刷新失败：跳转登录页

重试策略：

async function safeRequest(config, retries = 2) {
try {
 return await tokenManager.axiosInstance(config);
} catch (error) {
 if (retries > 0 && error.response?.status === 401) {
   await tokenManager.handleTokenRefresh(config);
   return safeRequest(config, retries - 1);
 }
 throw error;
}
}

五、常见问题解决方案

5.1 跨域问题处理

配置CORS策略允许刷新端点：

// 服务端配置示例
app.use(cors({
origin: 'https://your-frontend.com',
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true
}));

客户端Axios配置：

const instance = axios.create({
withCredentials: true,
// 其他配置...
});

5.2 移动端适配建议

网络状态处理：
- 监听网络变化事件
- 离线时缓存请求，在线后重试
Token持久化：
- 使用加密存储方案
- 实现自动恢复机制

六、进阶功能扩展

6.1 多角色Token支持

class MultiRoleTokenManager {
  constructor() {
    this.managers = new Map(); // 按角色存储TokenManager实例
  }
  getManager(role) {
    if (!this.managers.has(role)) {
      this.managers.set(role, new TokenManager(/* 配置 */));
    }
    return this.managers.get(role);
  }
}

6.2 监控与日志

请求日志记录：
``javascript function logRequest(config) { console.log([${new Date().toISOString()}] ${config.method} ${config.url}`);
}

// 在拦截器中添加日志
this.axiosInstance.interceptors.request.use(config => {
logRequest(config);
return config;
});
```

性能指标收集：
- 记录Token刷新耗时
- 统计刷新成功率

七、总结与展望

双Token无感刷新机制通过分离访问令牌和刷新令牌，在保障安全性的同时显著提升了用户体验。基于Axios的封装实现需要注意并发控制、错误处理和性能优化等关键点。实际开发中应结合具体业务场景，在安全性、可用性和性能之间取得平衡。

未来发展方向包括：

集成OAuth 2.0标准流程
支持PKCE等增强安全机制
实现基于WebAuthn的无密码认证
与Service Worker结合实现离线支持

通过完善的双Token管理机制，开发者可以构建出既安全又用户友好的认证体系，为现代Web应用提供坚实的身份认证基础。