一、技术背景与需求分析

在前端开发领域，随着微服务架构和前后端分离模式的普及，API调用的安全性和稳定性成为关键挑战。传统单token认证机制存在以下痛点：

1. token过期中断：单token有效期短，用户操作过程中token过期会导致请求失败，需手动刷新或重定向登录。
2. CSRF攻击风险：单token易被窃取或伪造，缺乏动态验证机制。
3. 并发请求阻塞：单axios实例在token刷新期间会阻塞所有请求，影响用户体验。

双axios双token技术通过以下设计解决上述问题：

• 双axios实例：主实例（axios-main）处理业务请求，备用实例（axios-refresh）专用于token刷新。
• 双token机制：Access Token（短期有效）用于API调用，Refresh Token（长期有效）用于无感刷新Access Token。
• 无感刷新：在Access Token过期前自动触发Refresh Token请求，更新后无缝切换主实例的token。

二、核心架构设计

1. 双axios实例管理

// 主axios实例（业务请求）
const axiosMain = axios.create({
  baseURL: 'https://api.example.com',
  headers: { 'Authorization': `Bearer ${localStorage.accessToken}` }
});
// 备用axios实例（token刷新）
const axiosRefresh = axios.create({
  baseURL: 'https://api.example.com/auth',
  headers: { 'Authorization': `Bearer ${localStorage.refreshToken}` }
});

设计要点：

• 隔离性：主实例与备用实例的请求队列、拦截器完全独立，避免刷新期间请求阻塞。
• 动态配置：通过拦截器动态更新主实例的token，无需重启实例。

2. 双token验证流程

1. 初始认证：用户登录后，服务器返回Access Token（有效期15分钟）和Refresh Token（有效期7天）。
2. 请求拦截：主实例拦截所有业务请求，检查Access Token有效期。
3. 无感刷新：
   • 若剩余有效期<2分钟，触发备用实例的刷新请求。
   • 刷新成功后，更新本地存储的Access Token，并重试被拦截的请求。
4. 失败处理：Refresh Token过期或无效时，跳转至登录页。

3. 拦截器实现

// 主实例请求拦截器
axiosMain.interceptors.request.use(async (config) => {
  const { accessToken, expiresIn } = parseToken(localStorage.accessToken);
  const remainingTime = expiresIn - Date.now() / 1000;
  if (remainingTime < 120) { // 剩余2分钟时触发刷新
    try {
      const response = await axiosRefresh.post('/refresh');
      const newAccessToken = response.data.accessToken;
      localStorage.setItem('accessToken', newAccessToken);
      config.headers.Authorization = `Bearer ${newAccessToken}`;
    } catch (error) {
      window.location.href = '/login';
    }
  }
  return config;
}, (error) => Promise.reject(error));

三、关键技术实现

1. Token存储与解析

• 安全存储：使用HttpOnly Cookie或加密的localStorage存储Refresh Token，防止XSS攻击。
• JWT解析：通过jwt-decode库解析Token的过期时间（exp字段）。

2. 请求队列管理

• 失败重试：对因token过期失败的请求，缓存至队列并在刷新后重试。
  ```javascript
  const pendingRequests = new Map();

axiosMain.interceptors.response.use(
(response) => response,
(error) => {
const { config, response } = error;
if (response?.status === 401 && !pendingRequests.has(config.url)) {
pendingRequests.set(config.url, config);
// 触发刷新逻辑…
}
return Promise.reject(error);
}
);

## 3. 并发控制
- **锁机制**：确保同一时间仅有一个刷新请求在执行，避免重复刷新。
```javascript
let isRefreshing = false;
async function refreshToken() {
  if (isRefreshing) return new Promise(resolve => {});
  isRefreshing = true;
  try {
    const response = await axiosRefresh.post('/refresh');
    // 更新token并重试请求...
  } finally {
    isRefreshing = false;
  }
}

四、优势与适用场景

1. 技术优势

• 无缝体验：用户无感知完成token刷新，避免操作中断。
• 安全性提升：双token分离降低CSRF攻击风险，Refresh Token可设置更严格的校验（如IP绑定）。
• 高可用性：双axios实例隔离请求，避免刷新期间业务请求阻塞。

2. 适用场景

• 高频API调用：如金融交易、实时数据监控等对连续性要求高的场景。
• 移动端应用：网络不稳定环境下，减少因token过期导致的请求失败。
• 微服务架构：多服务共享认证时，统一管理token生命周期。

五、实践建议

1. Token有效期设计：
   • Access Token：短有效期（如15分钟），减少泄露风险。
   • Refresh Token：长有效期（如7天），支持离线场景。
2. 监控与日志：
   • 记录token刷新频率，异常时触发告警。
   • 监控401错误率，优化token有效期策略。
3. 兼容性考虑：
   • 对不支持CORS的旧服务，通过代理层统一处理token。

六、总结

双axios双token无感刷新技术通过双实例隔离、双token验证和智能拦截，实现了认证安全性与用户体验的平衡。其核心价值在于：

• 前端层面：消除token过期导致的操作中断，提升用户留存率。
• 后端层面：减少无效请求，降低服务器压力。
• 安全层面：通过动态刷新和分离存储，构建更健壮的认证体系。

对于中大型前端项目，该方案可作为认证模块的标准实践，尤其适合对安全性和连续性要求高的场景。