使用 Axios 攔截器自動刷新令牌！-js教程-PHP中文網

使用 Axios 攔截器自動刷新令牌！

DDD

發布： 2024-10-23 06:27:29

原創

917 人瀏覽過

Automate Refresh Tokens with Axios Intercepters!

問題

不久前，我正在開發一個小項目，該項目與 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);
  }
);

登入後複製