OAuth多标签页下一次性Refresh Token的竞态问题处理

核心思路：全局流程控制 + 跨标签页状态同步 #

一次性Refresh Token的竞态问题根源是多标签页同时发起刷新请求，导致无效请求触发误登出。最优方案不是靠概率规避，而是让同一时间只有一个标签页发起刷新请求，其余标签页等待并复用新令牌。

成熟前端库解决方案 #

• auth0-spa-js：Auth0的SPA SDK内置多标签页认证同步机制。当一个标签页发起Refresh Token请求时，SDK会内部维护刷新锁，同一时间只允许一个刷新操作；其他标签页通过postMessage监听状态变化，自动同步新令牌集合，避免重复请求。
• supabase-js：Supabase客户端库原生处理了多标签页认证冲突。令牌过期时，仅第一个发起请求的标签页调用刷新接口，其余标签页等待并接收更新后的令牌，不会触发无效请求错误。

自定义实现方案（无需第三方库） #

如果不想依赖第三方库，可手动实现全局锁+状态同步：

1. 基于localStorage实现刷新锁与请求队列：

   let isRefreshing = false;
   const refreshQueue = [];
   
   async function refreshTokens() {
     if (isRefreshing) {
       return new Promise(resolve => refreshQueue.push(resolve));
     }
     isRefreshing = true;
     try {
       // 调用后端刷新接口
       const newTokens = await fetch('/api/refresh', {
         method: 'POST',
         body: JSON.stringify({ refreshToken: localStorage.getItem('refreshToken') })
       }).then(res => res.json());
       // 更新本地令牌
       localStorage.setItem('accessToken', newTokens.accessToken);
       localStorage.setItem('refreshToken', newTokens.refreshToken);
       // 通知所有等待的请求
       refreshQueue.forEach(resolve => resolve(newTokens));
       refreshQueue.length = 0;
       return newTokens;
     } catch (err) {
       // 仅在refreshToken真过期时登出，而非重复使用错误
       if (err.response?.status === 401 && err.response?.data?.code === 'TOKEN_EXPIRED') {
         logoutUser();
       }
       throw err;
     } finally {
       isRefreshing = false;
     }
   }
   

2. 监听storage事件同步跨标签页状态：

   window.addEventListener('storage', (e) => {
     if (e.key === 'accessToken' || e.key === 'refreshToken') {
       // 同步当前标签页的令牌状态
       currentAccessToken = e.newValue;
       currentRefreshToken = localStorage.getItem('refreshToken');
     }
   });
   

关键注意事项 #

• 必须使用localStorage而非sessionStorage，因为sessionStorage是标签页隔离的，无法跨页共享状态。
• 严格区分错误类型：后端需返回不同错误码，前端仅在refreshToken真过期时登出，遇到“重复使用”错误时直接同步新令牌即可。
• 确保刷新锁状态正确重置，避免请求失败后锁一直处于开启状态（通过finally块处理）。

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