Nuxt3中如何优雅处理$fetch的刷新令牌并发请求问题

背景介绍

在Nuxt3项目中，使用内置的$fetch进行API请求时，开发者经常会遇到需要处理JWT令牌刷新的场景。当多个并发请求同时触发401未授权错误时，传统的刷新令牌机制可能会导致重复刷新令牌的问题，这不仅会造成资源浪费，还可能引发安全风险。

问题分析

当多个请求同时检测到令牌过期时，每个请求都会尝试刷新令牌。这会导致以下问题：

1. 数据库中的刷新令牌被多次更新
2. 服务器负载增加
3. 可能导致令牌不一致的状态
4. 后续请求可能使用已失效的新令牌

解决方案

1. 请求队列机制

我们可以实现一个请求队列系统，确保只有一个刷新令牌的请求被发送：

let isReissuing = false;
const subscribers: ((token: string) => void)[] = [];

const retrySubscribers = (token: string) => {
  subscribers.forEach((callback) => callback(token));
  subscribers.length = 0;
};

2. 拦截器实现

在$fetch的拦截器中添加令牌刷新逻辑：

onResponseError({ request, options, response }) {
  if (response.status !== 401) return;
  
  if (!isReissuing) {
    isReissuing = true;
    // 执行令牌刷新逻辑
    // 刷新成功后调用retrySubscribers
  }
  
  // 将当前请求加入队列
  return new Promise((resolve) => {
    subscribers.push((newToken) => {
      // 使用新令牌重试请求
      resolve(retryRequest(request, options, newToken));
    });
  });
}

3. 请求重试机制

实现一个重试函数，使用新令牌重新发送原始请求：

const retryRequest = async (request: RequestInfo, options: any, newToken: string) => {
  const newOptions = {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${newToken}`
    }
  };
  return $fetch.raw(request, newOptions);
};

完整实现要点

1. 状态管理：使用isReissuing标志位跟踪当前是否正在刷新令牌
2. 回调队列：使用subscribers数组存储等待令牌刷新的请求回调
3. 错误处理：妥善处理刷新失败的情况，包括用户提示和状态重置
4. 并发控制：确保只有一个刷新请求被发送，其他请求等待刷新完成
5. 令牌更新：成功刷新后更新所有待处理请求的授权头

最佳实践建议

1. 令牌有效期：设置合理的令牌有效期，平衡安全性和用户体验
2. 错误提示：避免重复显示错误提示，使用isAlreadyAlerted标志控制
3. 安全考虑：使用安全的Cookie设置（secure, sameSite等）
4. 性能优化：尽量减少不必要的重试，合理设置重试次数和延迟

总结

在Nuxt3项目中处理$fetch的并发令牌刷新问题时，关键在于实现一个有效的请求队列机制。通过状态管理和回调队列，我们可以确保令牌刷新只执行一次，同时所有等待的请求都能使用新令牌正确重试。这种方法既保持了代码的简洁性，又确保了应用的安全性和稳定性。

对于需要处理认证的Nuxt3应用，建议将这套机制封装为插件或可复用模块，以便在整个项目中保持一致的行为。同时，根据实际业务需求调整重试策略和错误处理逻辑，以提供最佳的用户体验。