vue axios实现刷新token并继续之前的请求怎么破?

Domine
  • 67

vue axios实现刷新token并继续之前的请求怎么破?在拦截器中如何设置,能不能提供代码?
我在拦截器中的设置是下面的写法,但是并不会继续进行当前的请求,假设我要获取一个列表信息,当token过期后这样设置在刷新token后并不会继续获取列表信息的请求,请问哪里有问题,该如何解?

instance.interceptors.request.use(config => {
      if (!config.url.includes('/users')) {
        config.headers['x-access-token'] = Cookies.get(TOKEN_KEY)
        config.headers['Authorization'] = 'Bearer ' + Cookies.get(TOKEN_KEY)
      }
      if(Cookies.get(TOKEN_KEY)) {
        if(isTokenExpired() && config.url.indexOf('refresh') === -1) {
          console.log(window.isRefreshing);
          if(!window.isRefreshing) {
            window.isRefreshing = true;
            store.dispatch('refreshToken').then(function () {
                config.headers['x-access-token'] = Cookies.get(TOKEN_KEY)
                config.headers['Authorization'] = 'Bearer ' + Cookies.get(TOKEN_KEY)
                window.isRefreshing = false;

            })
          }
        }
      }

      // 添加全局的loading...
      if (!Object.keys(this.queue).length) {
        // Spin.show() // 不建议开启,因为界面不友好
      }
      this.queue[url] = true
      return config
    }, error => {
      return Promise.reject(error)
    })
回复
阅读 9.3k
6 个回答

token过期就应该重新获取,不应该再强行刷新的。在token未过期时可以在适当时候使用一个请求去刷新,比如页面刷新的时候。刷新token的意义是检查该用户是近期活跃的则延长token时长,而不是一直等token过期才刷。
用专门的请求刷新,不要在其他业务接口里刷新。

没猜错的话,refreshToken这个action是异步的吧?
可能还没更新token,拦截器函数已经return config了。

在response拦截器里 处理。判断response.status 如果是token过期(401?),使用refreshToken去刷新,取得新token之后 调用axios.request(response.config)重新发起请求、

axios-auth-refresh 这个npm包

黄土地的汉子
  • 5
新手上路,请多包涵
宣传栏