Question

我想在每次axios调用之前使用axios拦截器将idToken作为授权头传递给所有axios调用，如果在任何调用之前它已经过期，我想刷新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实例以执行刷新令牌api调用解决了该问题（新的AXIOS实例未通过定义的axios.interceptors.request.use解决）（当然，下面的代码只是一个简单的示例）

记住要保存原始请求并在刷新令牌后对其进行处理：

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)
})

和刷新令牌方法：

    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)
        })
      })
    }
  }

Axios拦截器请求在VueJs中过期时刷新id令牌

1 个答案: