axios 401 未经授权的刷新令牌多请求

简介

本文将介绍在使用 axios 进行网络请求时，当出现 401 未经授权错误时，如何处理未经授权的刷新令牌多次请求的问题。

问题描述

在进行网络请求时，服务器返回 401 错误表示未经授权。常见的应对措施是使用刷新令牌来获取新的访问令牌，然后重新发送请求。然而，有时出现未经授权的刷新令牌多次请求问题。这意味着在请求未经授权时，刷新令牌被多次使用，导致服务器产生额外的负担。

解决方法

为了避免未经授权的刷新令牌多次请求问题，可以采取以下解决方法：

1. 错误拦截器

使用 axios 提供的错误拦截器，在接收到 401 错误时进行处理。可以在拦截器中判断是否已经进行了刷新令牌的请求，如果已经有正在进行的刷新令牌请求，则无需再次发送请求。

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      if (!axios.isRefreshing) {
        axios.isRefreshing = true;
        return refreshToken().then((newToken) => {
          axios.isRefreshing = false;
          // 更新本地存储的访问令牌
          updateAccessToken(newToken);
          // 重新发送原始请求
          return axios.request(error.config);
        });
      }
    }
    return Promise.reject(error);
  }
);

2. 并发请求重试

使用 axios 的并发请求和重试机制来解决多次刷新令牌问题。在请求未经授权时，可以将刷新令牌请求和原始请求合并为一次并发请求。只有在刷新令牌请求成功后，再发送原始请求。

const refreshTokenRequest = axios.create();

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      const originalRequest = error.config;
      if (!axios.isRefreshing) {
        axios.isRefreshing = true;
        return refreshToken().then((newToken) => {
          axios.isRefreshing = false;
          // 更新本地存储的访问令牌
          updateAccessToken(newToken);
          originalRequest.headers.Authorization = `Bearer ${newToken}`;
          // 重新发送原始请求
          return axios(originalRequest);
        });
      }
      return new Promise((resolve) => {
        refreshTokenRequest.interceptors.response.use((response) => {
          resolve(response);
        });
        refreshTokenRequest(originalRequest);
      });
    }
    return Promise.reject(error);
  }
);

结论

在使用 axios 进行网络请求时，处理 401 未经授权错误和刷新令牌多次请求问题是必要的。通过使用错误拦截器或并发请求重试机制，可以有效减少未经授权的刷新令牌多次请求问题的发生，增强程序的稳定性和性能。

以上为解决此问题的方法，根据实际情况选择适合的解决方案来解决你的问题。

注意：示例代码仅供参考，具体实现根据项目需求和后端接口进行调整。

参考资料：

• axios 文档
• Refreshing a Token with Axios Interceptors