Axios 刷新令牌无限循环 - 多个请求答案

【问题标题】：Axios Refresh Token Infinite Loop - Multiple RequestsAxios 刷新令牌无限循环 - 多个请求
【发布时间】：2022-06-14 02:10:58
【问题描述】：

我查看了有关此问题的其他问题，但无法解决。我对刷新和访问令牌续订方法有获取请求限制，并且一个页面中会有多个请求。此外，我的系统中有一个不同的访问令牌/刷新令牌用法。

更新：通过在主实例中创建 axios 实例来处理无限循环问题。现在，我经常遇到请求取消问题，无法解决。请求后，会发出访问令牌请求，但会被取消。我不知道为什么。

您可以在下面看到序列图：

到目前为止，有时它的工作很草率，一个请求 -> 401 访问令牌过期错误 -> 在拦截器中更新访问令牌并将其写入 localStorage -> 相同的请求解决了 200

但大多数情况下都会发生这种情况，并且会继续进行访问令牌的 401 循环：

注意：在访问令牌循环开始时，我得到 401，包括“找不到员工”错误描述，这意味着在我们的系统中，更新的令牌不包含在传入的非令牌请求中（包括过期令牌在标题中）。一般非token请求的401错误的错误描述是“Token expired”。

可能的菜鸟问题：一个请求怎么可能只有一个预检和两个 xhr？

这是我的 service.js 代码：

 const sendRequest = async (options) => {
  let requestOptions = {
    ...    // includes the method, data etc.
    if (options.hasOwnProperty("token")) {
        requestOptions.headers = 
          Object.assign(requestOptions.headers, {
          Authorization: RequestOptionConstants.AUTHORIZATION + 
          options.token,
    });
   }
  
 return await axios(
  options.url, //  includes the api url
  requestOptions,    
  axios.interceptors.response.use(
    (response) => {   
      return response;
    },
    async (error) => {
      const originalConfig = error.config;

    if (error.response.status === 401 && !originalConfig._retry) {
      originalConfig._retry = true;

      let refreshToken = JSON.parse(localStorage.getItem("user"))
        .refreshToken;

      // Check for refresh token expiration

      if (jwtDecode(refreshToken).exp < new Date().getTime()) {  
        logout();                  
      }.       

      await axios
        .get(ApiConstants.GET_ACCESS_TOKEN, {
          headers: {
            Authorization:
              "Bearer " +
              JSON.parse(localStorage.getItem("user")).refreshToken,
          },
        })
        .then((res) => {
          if (res.status === 200) {
            const user = JSON.parse(localStorage.getItem("user"));
    

            originalConfig.headers["Authorization"] =
              "Bearer " + res.data.accessToken;

            user.accessToken = res.data.accessToken;

            localStorage.setItem("user", JSON.stringify(user));

            if (res.data.isRefreshTokenInRenewalPeriod) {
              getRefreshToken(originalConfig);
            }

            return axios(originalConfig);
          }
        });
    }

    return Promise.reject(error);
  }
))
   .then(handleResponse, (error) => Promise.reject(error))
   .then((data) => {
    return data;
   });
};

const handleResponse = (response) => {
  const data = response.data;
  if (!data?.result?.success ?? false) {
    const error = data.result;
    return Promise.reject(error);
  }

 return data;
};

function logout() {
  localStorage.removeItem("user");
  window.location.reload();
}

const getRefreshToken = () => {
  axios
    .get(ApiConstants.GET_REFRESH_TOKEN, {
      headers: {
        Authorization:
          "Bearer " + JSON.parse(localStorage.getItem("user")).refreshToken,
      },
    })
    .then((res) => {
      if (res.status === 200) {
        const user = JSON.parse(localStorage.getItem("user"));
        user.refreshToken = res.data.refreshToken;
        localStorage.setItem("user", JSON.stringify(user));
        return axios();
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

实际上我尝试了 Queue approach 的“return new Promise”方法。

队列方法解决了无限循环问题，但我在这次更新刷新令牌时仍然遇到描述为 'staff not found' 的 401 错误。如何解决异步等待方法的无限循环问题？

【问题讨论】：

标签： javascript reactjs axios refresh-token

【解决方案1】：

你试过 axios.interceptors.response.eject() 了吗？它将有助于在 API 调用时禁用拦截器并在之后重新启用它。示例：

if (error.response.status === 401 && !originalConfig._retry) {
  originalConfig._retry = true;

  **// Add axios interceptors eject to avoid loop
  axios.interceptors.response.eject();**

  let refreshToken = JSON.parse(localStorage.getItem("user"))
    .refreshToken;

  // Check for refresh token expiration

  if (jwtDecode(refreshToken).exp < new Date().getTime()) {  
    logout();                  
  }
....

【讨论】：