使用 Axios 拦截器自动刷新令牌！

问题

不久前，我正在开发一个小项目，该项目与 Salesforce API 交互并对我的对象执行 CRUD 操作。我使用的是 React.js（没有后端设置，只有静态前端）。但是，我在使用 API 时遇到了问题。我使用OAuth方法生成的访问令牌的有效期只有24小时！这意味着我每次刷新应用程序时都必须通过进行 OAuth API 调用来手动生成新令牌。

我不喜欢我的应用程序对 Salesforce OAuth 进行不必要的 API 调用来刷新令牌，即使它尚未过期。为了克服这个问题，我想在我的代码中实现以下逻辑：

axios.get('https://www.someapi.com/fetch-data').then((data)=> {
// doing something with the Data
},{}).catch((error)=> {
    if(error.response.statusCode === 401){
        // If Token Expired
        RefreshToken()
        window.alert("Session Expired Please Reload the Window!")
    }
})

我的逻辑本质上是这样的：如果 API 端点有 401 响应，我会进行刷新令牌 API 调用，将新令牌存储在本地存储中，然后提示用户重新加载页面以使用新生成的令牌用于后续 API 调用。然而，这种方法依赖于用户执行额外的操作，该操作可以自动化以改善用户体验并避免不必要的中断。

使用 Axios 拦截器

让我们看看它的实际效果

axios.interceptors.response.use(
  (response) => response,
  async function (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        })
          .then((token) => {
            originalRequest.headers["Authorization"] = "Bearer " + token;
            return axios(originalRequest);
          })
          .catch((err) => {
            return Promise.reject(err);
          });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      return new Promise((resolve, reject) => {
        initiateNewAccessTokenApi()
          .then((token) => {
            axios.defaults.headers.common["Authorization"] = "Bearer " + token;
            originalRequest.headers["Authorization"] = "Bearer " + token;
            processQueue(null, token);
            resolve(axios(originalRequest));
          })
          .catch((err) => {
            processQueue(err, null);
            reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      });
    }

    return Promise.reject(error);
  }
);

代码说明

我所做的是将中间件附加到 Axios 发出的每个请求，检查是否有任何响应返回 401 HTTP 状态代码。如果是，我将通过调用刷新令牌 API 重新启动访问令牌，将新令牌存储在本地存储中，并自动重新触发之前被拒绝的所有 API 调用。就是这样！不再要求用户“重新加载窗口！”？

我希望这对您有所帮助并与您的工作很好地结合！

以上是使用 Axios 拦截器自动刷新令牌！的详细内容。更多信息请关注PHP中文网其他相关文章！