javascript - Axios 拦截器请求在 VueJs 中过期时刷新 id token

Question

我想在每次 axios 调用之前使用 axios 拦截器将 idToken 作为所有 axios 调用的授权 header 传递，如果 idToken 在任何调用之前已过期，我想刷新它。

我正在使用以下代码:

axios.interceptors.request.use(function(config) {
  var idToken = getIdToken()
  var refreshToken = {
    "refreshToken" : getRefreshToken()
  }

   if(isTokenExpired(idToken)){
     console.log("==============Reloading")
     refresh(refreshToken).then(response=>{
       setIdToken(response.idToken)
       setAccessToken(response.accessToken)
     })
     idToken = getIdToken()
     config.headers.Authorization = `${idToken}`;
   }
   else{
    config.headers.Authorization = `${idToken}`;
   }
 return config;
 }, function(err) {
  return Promise.reject(err);
});

在 idToken 有效之前，它工作正常。当 idToken 过期时，它进入无限循环并且页面挂起。请帮我解决一下这个。调用刷新 API 的 refresh() 如下所示:

function refresh(refreshToken) {
  const url = `${BASE_URL}/user/refresh`;
  return axios.post(url,JSON.stringify(refreshToken))
  .then(response =>response.data.data)
  .catch(e => {
      console.log(e);
  });
}

Answer 1

我有一些类似的问题，创建新的 axios 实例来执行刷新 token api 调用解决了这个问题(新的 AXIOS 实例没有被定义的 axios.interceptors.request.use 解决)(当然下面的代码只是一个简单的例子) .

记得保存原始请求并在刷新 token 后处理它:

F.ex 我的 http-common.js

import axios from 'axios'
const AXIOS = axios.create()
export default AXIOS

...

在 App.vue 中:

axios.interceptors.request.use((config) => {
  let originalRequest = config
  if (helper.isTokenExpired(this.$store.getters.tokenInfo)) {
    return this.refreshToken(this.$store.getters.jwt).then((response) => {
      localStorage.setItem('token', response.data.token)
      originalRequest.headers.Authorization = response.data.token
      return Promise.resolve(originalRequest)
    })
  }
  return config
}, (err) => {
  return Promise.reject(err)
})

和刷新 token 方法:

    refreshToken (token) {
      const payload = {
        token: token
      }
      const headers = {
        'Content-Type': 'application/json'
      }
      return new Promise((resolve, reject) => {
        return AXIOS.post('/api/auth/token/refresh/', payload, { headers: headers }).then((response) => {
          resolve(response)
        }).catch((error) => {
          reject(error)
        })
      })
    }
  }