Axios攔截器過期時間

Question

下面我將發布我的 AXIOS 代碼。 當我啟動應用程序（Vue js）時首先發生的是它打開登錄頁面，當我輸入用戶名/密碼時，我在本地存儲中設置令牌和刷新令牌。 這很好用，我可以進行其他需要令牌的 api 調用。 問題在到期時（登錄后 3 分鍾內）發生，進入無限循環。 另外問題是我不知道如何檢查刷新令牌的到期時間，因為我無法用我寫的這個 function 對其進行解碼。

訪問令牌：

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIyIiwianRpIjoiMTg4YjQ0NDg2MzdmMmJhYWRkMDE1MmU5OWRhNGIwMWYxMzgxMzVjY2Q5YjA2NmRlM2M4YjFkZjk4ODE1ZGZmNGZhOGE2ODQ2YWI4ZjY1YjkiLCJpYXQiOjE2MjE1MzcxOTAuNjg5MjgzLCJuYmYiOjE2MjE1MzcxOTAuNjg5Mjg2LCJleHAiOjE2MjE1MzczNzAuNjc3NDM3LCJzdWIiOiIyIiwic2NvcGVzIjpbXX0.U5lNHetMq6vEnUKwxlJ9sa9lU6ahj-lDlxjWFdaTuXaGCcmx8zb917OSKkZa1g8PA3NArC6nMVbWfbD44DXLF3I6UFFXAYNncuH8kAngIh-XyRhUgr3MDOR04dCb02Khchs30QnbznHFvox1wtTXLEIT2wzdGI0_GGQot3ZFvxBfukRVt64uqC7GrVxcpoZXV2LXY7LxkZXoEd88QFcjfWWw_RC1fyU7gNaGxF4xml5CyJGZOcM1S-1QlBsXE-HE5qeJPZilxOJLHvxSYo-HFTbl7u0WNlryyCAxJqoeMHIqmHrEmZX261IdMFdQ7sl9YP-rXtg5hY_SDVoaE-KjHThltKvPkV_XeWxWQ3KqCDqm7UMZyxkWzEMglE4Ym8hvNsgUIlZMVeKCuYkQ2Vri-X2whttaVwM4-pJPbAqJURYu2WRDWgBbIWWkXkw4GLUFTDIllOmIBESUjba_L3x2dHrce3PpBOBw8dYDPttdqch6t_J7vBsRUu8-DcHDzxnVu6vBYmQA-TAlI9yN7gOgn_gMDMq6FhitKuQ9KghACJmTjqB-_BbxAI3pWwAuPeAas7uB9ugzpScKPPZtThoI08wQ8pT7Xz8JvZTEharzUHcldu2rIlUCif6l-rtszIQNYcCfWFMBVP9HFRSgCcEtgl3L5SPfQGW0Ytc2P_ED4HE

刷新令牌：

它們是不同的，當我解碼訪問令牌時，我得到一個 object，它有這個鍵“exp”：1621533539.9695 ，它是過期時間，但不是刷新令牌。

任何想法？

export const API = axios.create({
  baseURL: BASE_URL,
  withCredentials: false,
  headers: {
    Accept: "*/*",
    "Access-Control-Allow-Origin": "*",
  },
});


// CHECK IF TOKEN IS EXPIRED (DECODE TOKEN)
function isTokenExpired(token) {
  const base64Url = token.split(".")[1];
  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const jsonPayload = decodeURIComponent(
    atob(base64)
      .split("")
      .map(function (c) {
        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
      .join("")
  );
  const data = JSON.parse(jsonPayload);
  const expirationDate = data.exp;
  const currentDate = new Date().getTime() / 1000;
  return currentDate >= expirationDate;
}


API.interceptors.request.use(
  async (config) => {
    let token = localStorage.getItem("accessToken");
    let refreshToken = localStorage.getItem("refreshToken");

    //if refresh token is expired we logout and return early
    // if (refreshToken) {
    //   const isExpired = isTokenExpired(refreshToken);
    //   if (isExpired) {
    //     localStorage.setItem("accessToken", "");
    //     localStorage.setItem("refreshToken", "");
    //     router.push({ path: "/login" });
    //   }
    //   return config;
    // }

    // if token is expired we refresh the token
    if (token) {
      const isExpired = isTokenExpired(token);
      if (isExpired) {
        const data = await API.post("/token", {
          grant_type: "refresh_token",
          refresh_token: refreshToken,
        });
        if (data) {
          token = data.access_token;
          localStorage.setItem("accessToken", data.data.access_token);
          localStorage.setItem("refreshToken", data.data.refresh_token);
        }
      }
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);



//CHECK AFTER REQUEST IF RESPONSE IS 401
API.interceptors.response.use(
  (response) => response,
  async (error) => {
    let refreshToken = localStorage.getItem("refreshToken");

    if (error.response?.status && error.response?.status === 401) {
      const data = await API.post("/token", {
        grant_type: "refresh_token",
        refresh_token: refreshToken,
      });
      if (data) {
        localStorage.setItem("accessToken", data.data.access_token);
        localStorage.setItem("refreshToken", data.data.refresh_token);
        error.config.headers.Authorization = "Bearer " + data.access_token;
        return API.request(error.config);
      }
    }
    throw error.response;
  }
);

Answer 1

刷新令牌不附帶到期日期。 您需要嘗試使用它獲取新令牌。 如果無效，您的 API 會告訴您，然后您需要將用戶發送回登錄頁面。

我想你知道刷新令牌流程，但我還是把它留在這里：

1. 檢查您的 localStorage 中是否有令牌和刷新令牌。
2. 擁有它們后，請檢查令牌是否已過期。
3. 如果過期，您需要將刷新令牌發送到您的 api。
4. API 會給你另一個令牌和 refreshToken，存儲它們並繼續發出請求。
5. 如果 API 拒絕 refreshToken，請將您的用戶發送到登錄頁面。

如果您需要，我有一個完整的 refreshToken 和重新嘗試請求的示例。

每次您的令牌過期時，您都需要執行刷新令牌過程。