刷新token重新请求接口

我这里的token是调用接口,用一个refreshToken调用接口换回来新的token,然后再拿着新的token去请求接口,通过调用接口返回的code状态码来判断是否需要刷新token

在能获取到token过期状态码的地方写入

这里我参考的是关于实现token无感刷新的解决方案_老蛙@的博客-CSDN博客_token无感刷新

 我这里是有一点问题我在刷新完token重新请求的时候会请求出错,原因是每次都会在拼一次我设置的baseUrl地址,然后再重新请求的时候吧baseURL地址清空就可以了

 if (error.response.data.code == 10001) {
      //刷新token
      //判断是否正在更新token
      if (!isRefreshing) {
        isRefreshing = true; //更新状态
        //发起刷新token
        retryRequests.push(error.response.config);
        await loadToken(getLocal('refreshToken')).then((res) => {
         
          if (res.code == 200) {
            console.log(res.data );
            setLocal('token', res.data) //刷新成功
            //遍历缓存队列 发起请求 传入最新token
         
            retryRequests.forEach((cb) => {
              cb.baseURL=''
              cb.headers.Authorization = `Bearer ${res.data}`;
             console.log(cb,getLocal('token') );

           service(cb);
          });
           isRefreshing =false
            // 重试完清空这个队列
            retryRequests = []
          } else {
            //刷新失败 重新登录
            if (doms2 == undefined) {
              Message.error({
                message: "登录失效,请重新登录",
              });
            }
            //清除登录状态
            clearLocal('token')

          }
        });
        // 正在刷新token,返回一个未执行resolve的promise
      } else {
        //这里的Promise里并没有调用resolve()去改变状态,而是直接push一个函数方法到数组
        //这样就可以把请求暂存起来,等待上面刷新token请求成功后,遍历 retryRequests数组
        //把新的token通过函数传参方式传入  调用方法执行重新请求
        return new Promise((resolve) => {
          // 将resolve放进队列,用一个函数形式来保存,等token刷新后调用执行
          retryRequests.push(error.response.config);
        });
      }


    }

你可能感兴趣的:(前端开发,vue.js,前端,javascript,vue.js)