当前位置：首页 > news >正文

封装Axios拦截器实现用户无感刷新AccessToken实践指南

news 来源：原创 2025/5/15 8:23:07

一、背景与需求场景

1.1 单点登录体系中的Token管理

在单点登录（SSO）体系下，用户登录后系统会颁发两种令牌：

AccessToken：短期有效（2小时），用于接口鉴权
RefreshToken：长期有效（7天），用于刷新令牌

1.2 核心需求痛点

当AccessToken过期时，前端需要实现：

无感知刷新：用户操作不中断
并发控制：避免多个请求重复刷新
异常处理：RefreshToken失效时跳转登录

二、技术实现方案

2.1 整体实现思路

采用响应拦截器方案，当接口返回401时触发刷新机制：

2.2 核心代码实现

2.2.1 初始化Axios实例

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
})

2.2.2 响应拦截器实现

// 刷新状态标记，用于记录当前是否正在进行刷新 token 的操作
// 避免在刷新 token 过程中重复发起刷新请求
let isRefreshing = false;
// 请求等待队列，用于存储在刷新 token 期间被拦截的请求
// 当新的 access_token 获取成功后，会依次处理这些请求
let requests = [];

// 为 axios 实例添加响应拦截器
// 响应拦截器会在每次请求响应回来时触发，可用于对响应进行统一处理
instance.interceptors.response.use(
  // 当响应成功时，直接返回响应对象，不做额外处理
  response => response,
  // 当响应出现错误时的处理逻辑
  error => {
    // 从错误对象中解构出响应对象和请求配置对象
    const { response, config } = error;

    // 判断响应状态码是否为 401（未授权），并且请求的 URL 不包含 '/auth/refresh'
    // 排除刷新 token 请求本身出现 401 错误的情况，避免无限循环
    if (response.status === 401 && !config.url.includes('/auth/refresh')) {
      // 如果当前没有正在进行刷新 token 的操作
      if (!isRefreshing) {
        // 标记正在进行刷新 token 的操作
        isRefreshing = true;
        // 调用刷新 token 的函数
        return refreshToken()
          .then(({ access_token }) => {
            // 刷新 token 成功，将新的 access_token 存储起来
            setToken(access_token);
            // 更新当前请求的请求头，使用新的 access_token
            config.headers.Authorization = `Bearer ${access_token}`;
            // 遍历请求等待队列，依次执行队列中的回调函数，并传入新的 access_token
            requests.forEach(cb => cb(access_token));
            // 清空请求等待队列
            requests = [];
            // 使用更新后的请求配置重新发起请求，并返回请求结果
            return instance(config);
          })
          .catch(() => {
            // 刷新 token 失败，调用登出函数，可能会清除本地存储的 token 并重定向到登录页
            logout();
          })
          .finally(() => {
            // 无论刷新 token 成功还是失败，都将刷新状态标记设置为 false，表示刷新操作结束
            isRefreshing = false;
          });
      }
      // 如果当前正在进行刷新 token 的操作
      return new Promise(resolve => {
        // 将当前请求封装成一个回调函数，加入到请求等待队列中
        requests.push(newToken => {
          // 当新的 access_token 获取成功后，更新当前请求的请求头
          config.headers.Authorization = `Bearer ${newToken}`;
          // 使用更新后的请求配置重新发起请求，并将结果传递给 resolve 函数
          resolve(instance(config));
        });
      });
    }
    // 如果不是 401 错误或者是刷新 token 请求本身出现错误，直接将错误对象抛出
    return Promise.reject(error);
  }
);

2.3 关键代码解析

代码部分	功能说明
`isRefreshing`	防止重复刷新的状态锁
`requests`	存储等待中的请求队列
`config.url.includes`	排除刷新接口本身
`requests.forEach`	令牌刷新后重发所有挂起请求
`new Promise`	创建待处理的Promise对象

三、方案优化点

3.1 防止并发刷新

通过isRefreshing状态锁实现：

if (!isRefreshing) {
  isRefreshing = true
  // 刷新逻辑...
}

3.2 请求队列处理

使用闭包存储请求配置：

requests.push(newToken => {
  config.headers.Authorization = `Bearer ${newToken}`
  resolve(instance(config))
})

3.3 安全增强措施

加密存储Token到Cookie
设置HttpOnly属性
启用Secure传输

四、方案对比分析

方案	优点	缺点
请求拦截器方案	节省无效请求	依赖本地时间准确性
响应拦截器方案	时间判断更可靠	多一次失败请求
服务端代理方案	前端完全无感知	需要服务端支持
WebSocket方案	实时性最好	实现复杂，资源消耗大

五、完整实现代码

// utils/request.js
import axios from 'axios'

let isRefreshing = false
let requests = []

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
})

// 响应拦截器
instance.interceptors.response.use(
  response => response,
  error => {
    if (!error.response) return Promise.reject(error)
    
    const { status, config } = error.response
    if (status === 401 && !config._retry) {
      config._retry = true
      
      if (!isRefreshing) {
        isRefreshing = true
        return refreshToken()
          .then(({ access_token }) => {
            setToken(access_token)
            instance.defaults.headers.common['Authorization'] = `Bearer ${access_token}`
            requests.forEach(cb => cb(access_token))
            requests = []
            return instance(config)
          })
          .catch(err => {
            clearToken()
            redirectLogin()
            return Promise.reject(err)
          })
          .finally(() => isRefreshing = false)
      }
      
      return new Promise(resolve => {
        requests.push(token => {
          config.headers['Authorization'] = `Bearer ${token}`
          resolve(instance(config))
        })
      })
    }
    return Promise.reject(error)
  }
)

// 刷新Token方法
async function refreshToken() {
  try {
    const { refresh_token } = getToken()
    return await axios.post('/auth/refresh', { refresh_token })
  } catch (err) {
    throw new Error('刷新令牌失败')
  }
}