开发者问题收集

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

2022-04-06
2788

我查看了有关此问题的其他问题,但无法修复它。我对刷新和访问令牌更新方法有 获取请求 限制,并且一个页面中会有 多个请求 。此外,我在我们的系统中有 不同的访问令牌/刷新令牌用法

更新: 通过在主实例中创建 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);
    });
};

其实我尝试了 队列方法 中的“返回新的 Promise”方法。

队列方法解决了无限循环的问题,但这次更新刷新 token 时仍然遇到 401 错误,错误描述为“未找到工作人员”。如何解决 async await 方法的无限循环问题?

已解决: 我通过为 accessToken 和 refreshToken 定义另外两个 axios 实例并按顺序调用它们解决了此问题。由于机密性,图像已被删除。

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();                  
  }
....
Dat Ngo
2022-06-13