React中OAuth2异步refresh_token重复刷新问题解决方案咨询

这简直是OAuth2集成里的经典坑！我之前在做React项目对接OAuth2服务时也踩过一模一样的雷——页面加载时多个组件同时调用安全接口，token一过期就齐刷刷触发refresh请求，不仅后端炸锅，前端还可能拿到旧token导致请求失败。给你分享几个经过项目验证的解决方案：

核心思路是当第一个请求触发token过期时，发起刷新请求并把这个Promise缓存起来，后续所有需要刷新的请求都等待这个Promise完成，复用新token，而不是各自发起刷新。

比如在Axios拦截器里这么实现：

// 全局变量，存储正在进行的刷新Promise
let refreshPromise = null;

axios.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    
    // 判断是否是token过期的401错误，且不是刷新请求本身
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true; // 标记已重试，避免无限循环
      
      if (!refreshPromise) {
        // 没有正在进行的刷新，发起请求
        refreshPromise = axios.post('/api/refresh-token', {
          refreshToken: localStorage.getItem('refreshToken')
        }).then(res => {
          // 更新本地token和Axios默认headers
          const newToken = res.data.accessToken;
          localStorage.setItem('accessToken', newToken);
          axios.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
          return newToken;
        }).finally(() => {
          // 刷新完成后清空Promise，允许下次刷新
          refreshPromise = null;
        });
      }
      
      // 等待刷新完成，用新token重发原请求
      const newToken = await refreshPromise;
      originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
      return axios(originalRequest);
    }
    
    return Promise.reject(error);
  }
);

这个逻辑能确保同一时间只有一个刷新请求在跑，所有过期的请求都排队等新token，完美解决并发刷新问题。

把token的获取、刷新、状态都封装在一个单例Auth类里，组件所有API请求都通过这个服务发起，让它内部控制刷新的并发逻辑。

示例代码：

class AuthService {
  constructor() {
    this.accessToken = localStorage.getItem('accessToken');
    this.refreshToken = localStorage.getItem('refreshToken');
    this.isRefreshing = false;
    this.requestQueue = []; // 存储等待刷新完成的请求回调
  }

  // 处理等待队列里的请求
  processQueue(error, newToken = null) {
    this.requestQueue.forEach(({ resolve, reject }) => {
      error ? reject(error) : resolve(newToken);
    });
    this.requestQueue = [];
  }

  // 判断token是否过期（需要你根据自身token结构实现）
  isTokenExpired(token) {
    if (!token) return true;
    const decoded = JSON.parse(atob(token.split('.')[1]));
    return decoded.exp * 1000 < Date.now();
  }

  async getValidToken() {
    // token有效直接返回
    if (!this.isTokenExpired(this.accessToken)) {
      return this.accessToken;
    }

    // 正在刷新，加入队列等待
    if (this.isRefreshing) {
      return new Promise((resolve, reject) => {
        this.requestQueue.push({ resolve, reject });
      });
    }

    this.isRefreshing = true;
    try {
      const res = await axios.post('/api/refresh-token', { refreshToken: this.refreshToken });
      this.accessToken = res.data.accessToken;
      localStorage.setItem('accessToken', this.accessToken);
      this.processQueue(null, this.accessToken);
      return this.accessToken;
    } catch (error) {
      this.processQueue(error);
      // 刷新失败，跳转到登录页
      window.location.href = '/login';
      throw error;
    } finally {
      this.isRefreshing = false;
    }
  }

  // 封装请求方法，组件调用这个发请求
  async request(config) {
    const token = await this.getValidToken();
    config.headers = {
      ...config.headers,
      Authorization: `Bearer ${token}`
    };
    return axios(config);
  }
}

// 导出单例，确保全局只有一个Auth实例
export const authService = new AuthService();

之后组件里就用authService.request({ url: '/secure/data', method: 'GET' })来发起请求，所有请求都会先经过token有效性校验，从根源避免并发刷新。

• 提前刷新token：不要等token过期再刷新，比如在token过期前5分钟自动发起刷新，让用户完全感知不到token更新过程。
• 安全存储refresh token：尽量把refresh token存在HttpOnly Cookie里，避免localStorage带来的XSS风险。
• 统一错误处理：在全局拦截器里处理token失效后的跳转逻辑，不要让每个组件单独处理。

内容的提问来源于stack exchange，提问作者Covain