0

我正在尝试使用 Vue 3 和 Java 为后端实现刷新令牌。它正在工作，但拦截器一直在开火。

逻辑：在每个请求上都有一个 JWT Authorization 标头对用户进行身份验证。如果过期，则有一个准备好刷新 JWT 的 cookie 端点。

我正在使用 axios 和拦截器响应来检查客户端是否获得 401 来尝试刷新 JWT。cookie 可能有效或无效。

问题是刷新 JWT 的拦截器永远不会停止触发，我认为我的请求同步有问题。下面是我的代码：

api.js：

import axios from "axios";


 const instance = axios.create({
  baseURL: "MY_URL",
});


export default instance;

token.service.js：

class TokenService {
  getLocalRefreshToken() {
    const user = JSON.parse(localStorage.getItem("user"));
    return user?.refreshToken;
  }
  getLocalAccessToken() {
    const user = JSON.parse(localStorage.getItem("user"));
    return user?.accessToken;
  }
  updateLocalAccessToken(token) {
    let user = JSON.parse(localStorage.getItem("user"));
    user.accessToken = token;
    localStorage.setItem("user", JSON.stringify(user));
  }
  getUser() {
    return JSON.parse(localStorage.getItem("user"));
  }
  setUser(user) {
    // eslint-disable-next-line no-console
    console.log(JSON.stringify(user));
    localStorage.setItem("user", JSON.stringify(user));
  }
  removeUser() {
    localStorage.removeItem("user");
  }
}
export default new TokenService();

setupInterceptors.js：

import axiosInstance from "./api";
import TokenService from "./token.service";
const setup = (store) => {
  axiosInstance.interceptors.request.use(
    (config) => {
      const token = TokenService.getLocalAccessToken();
      if (token) {
        config.headers["Authorization"] = 'Bearer ' + token;
      }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

  axiosInstance.interceptors.response.eject()

  axiosInstance.interceptors.response.use(
    (res) => {
      return res;
    },
    async (err) => {
      const originalConfig = err.config;
      if (originalConfig.url !== "/auth/login" && err.response) {
        // Access Token was expired
        if (err.response.status === 401 && !originalConfig._retry) {
          originalConfig._retry = true;
          try {
            const rs = await axiosInstance.post("/auth/refreshtoken", {
              refreshToken: TokenService.getLocalRefreshToken(),
            });
            const { accessToken } = rs.data;
            store.dispatch("auth/refreshToken", accessToken);
            TokenService.updateLocalAccessToken(accessToken);
            return axiosInstance(originalConfig);
          } catch (_error) {
            return Promise.reject(_error);
          }
        }
      }
      return Promise.reject(err);
    }
  );
};
export default setup;
4

1 回答 1

0

在发送请求刷新之前尝试清理 el 令牌授权，例如在突变（vuex）中

clearAccessToken(state) {
   state.access_token = ''
   TokenService.removeAccessTokenApi();
},
于 2022-03-04T17:05:49.550 回答