Axios拦截器到期时间

Question

下面我将张贴我的AXIOS代码。首先，当我启动应用程序(Vue js)时，它会打开登录页面，当我输入用户名/密码时，我会在本地存储中设置令牌和刷新令牌。这很好，我可以进行其他需要令牌的api调用。当它过期时(在登录后3分钟内)，问题就会发生，它会进入无限循环。另外，我不知道如何检查刷新令牌的过期时间，因为我无法用我编写的函数对其进行解码。

访问令牌：

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

刷新令牌：

def502009a8ebae0e2d2d18b541daa39725ed826115ce9612db43e399b3edc7fe7d08950e5972b8c13faa8846962fb4a027a95a5cdefcdb526051644a1031c909ee6ad1cbc421aa12d0a096728dff99e8c72aef8e7e527824287274cee8d702d20e7468985d5d648c990df99990c283b490bb33d97cf2ecfaf176e6ecd2259db183d95d7bdd664600319d6af36e463e777e01cdd364cdbf146d10ea9a58a1ba5b01adb98ac7ffb27ebfd10cb62f79d1bcb7bf13c3adc1fe70f9de554bc98258ac8071d46a1cc51812140fae06291868016e97b39bb31b8a749a4ed2daa78f53e66256351d3aada01f5bb7ffcc5d4f8494cb0116b9816e92ba614e78dff8730b7e81b22049b73a69956a55daeec3b53c4a87f34280af1451cf67e81f804346fa1f121788af98becedb896991c8349e87eace91b73019381cc8550160742e3141ea7ef3eb0a71333496489c3e43c47fb18c076d2a9950ffe6dc6138bea1f7cd8cbf3

它们是不同的，当我解码访问令牌时，会得到一个对象，它的密钥"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会告诉您，那么您需要将您的用户发送回登录页面。

我想您知道刷新令牌流，但我还是把它留在这里：

检查localStorage.

• Once中是否有令牌和刷新令牌，检查令牌是否过期。如果令牌过期，则需要将刷新令牌发送到API。

1. 将给您另一个令牌和refreshToken，并存储它们并继续发出请求。如果API拒绝refreshToken，请发送用户登录页面。

G 211

我有一个完整的refreshToken示例，如果需要，可以重新尝试请求。

每次令牌过期时，都需要执行刷新令牌进程。