美文网首页
处理axios异步问题:刷新token后重新请求

处理axios异步问题:刷新token后重新请求

作者: RealHumans | 来源:发表于2019-07-22 16:33 被阅读0次

    vue项目中,处理用户过期的token遇到个小问题。按照思路,在axios请求拦截器中加上token过期的判断,当token快过期时重新获取token并将请求中的token替换上。发现刷新后的token未能及时替换到当前请求上。

    把核心代码摘出来捋一捋

    let https=axios.create({
      headers:{
        Authorization:`bearerAuthorization`
      }
    })
    
    https.interceptors.request.use(config => {
      if(判断token是否过期){
        let promisefresh = new Promise(function(resolve, reject) {
          //刷新token
          axios.post(url, data).then(response => {
            config.headers.Authorization = `Bearer ${response.data.access_token}`;
            resolve(config);
          })
        });
        return promisefresh;
      }else{
        return config;
      }
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    

    获取到新的token后要替换上,要注意axios 默认值的先后顺序

    //创建实例时的headers设置的值覆盖库的默认值
    let https=axios.create({
      headers:{
        Authorization:`bearerAuthorization`
      }
    })
    //实例的 defaults 属性覆盖创建实例时的属性
    //最后是请求的 config 参数覆盖实例的 defaults 属性
    config.headers.Authorization = `Bearer ${response.data.access_token}`;
    

    http.interceptors.request.use请求拦截器执行的时请求之前的操作,请求拦截器中处理完之后要记得返回config。config包含了请求的信息,请求头,请求方式等等。

    这里要用Promise 处理异步问题。如果判断完token过期直接调用刷新接口获取token,在新token还没有进行本地替换前,请求的config已经被返回,请求过期的token未被替换,要下一次请求才能替换上新的token。

    关于promise的介绍,RandyZhang写的一篇简书介绍的很清楚,大家可以看看。
    https://www.jianshu.com/p/115b4c79a75d

    简单说下怎么判断token是否过期

    登录的时候后端返回一个token过期时间(秒),转换成时间戳保存下来。在拦截器中获取当前的时间,进行对比。

    //获取系统的当前时间
    new Date().getTime()
    //保存的过期时间,系统当前的时间加上过期的秒数
    new Date().getTime() + response.data.expires_in * 1000
    

    相关文章

      网友评论

          本文标题:处理axios异步问题:刷新token后重新请求

          本文链接:https://www.haomeiwen.com/subject/kjlwlctx.html