vue token 快过期时去调刷新toekn的接口

需求:在token快过期的时候,提前去调请求刷新token的接口
具体实现的方法:

axios.interceptors.response.use(
  (response) => {
    if (loadinginstace) {
      status = false;
      loadinginstace.close();
    }
    if (response.status === 200) {
      // TODO:
      const newTime = parseInt((new Date()).getTime(), 0);
      const newTimes = newTime + 3480000; // 当前时间
      const LastTime = Cookies.get('LastTime');
      if (newTimes > LastTime) {
        // alert('系统时间 大于 token有效期');
        // 刷新token的函数,这需要添加一个开关,防止重复请求
        if (isRefreshing) {
          Cookies.remove('token');
          Cookies.remove('LastTime');
          const userInfo = JSON.parse(Cookies.get('userInfo'));
          const password = Cookies.get('passWord');
          const params = {
            loginName: userInfo.loginName,
            password,
          };
          axios.post('login', params)
            .then((res) => {
              const data = res.token;
              const dataToken = data.token || '';
              const LastTimes = data.expiresIn + data.tokenUpdateTime; // 最终token失效时间
              Cookies.set('token', dataToken);
              Cookies.set('LastTime', LastTimes);
              // window.location.reload();
              console.log(res);
              // onAccessTokenFetched();
            });
        }
        isRefreshing = false;
        const retryOriginalRequest = new Promise((resolve) => {
          console.log(resolve);
        });
        return retryOriginalRequest;
      }
      return Promise.resolve(response.data);
    }
    return response;
  },
  (error) => {
    if (loadinginstace) {
      loadinginstace.close();
      status = false;
    }
    return Promise.reject(error);
  },
);

现在的问题是: 当点击某个事件去调接口的时候,这个时候刚好
系统时间 大于 token的有效期, 会先走点击事件的接口,最后才走刷新toekn的接口,这个时候点击事件的接口的数据返回来了,但视图没有去更新, 请问大家知道这种情况该怎么处理吗

阅读 152
评论
    4 个回答
    • 804

    如果你真要这样搞,那不是应该在请求的时候做拦截,点击事件触发接口的时候,做下请求拦截,判断token是否过期,过期了就重新刷新token,拿到后继续接口请求。没过期就直接走接口请求咯

      token过期跳转到登录页面

        • 1.8k

        如果你允许自动刷新,你就不要设置过期喽,你刷新的时候只有之前的token作为凭据,那和不过期有啥区别嘛,一般都是不会刷新,过期就跳转到登陆,让用户重新登陆

          • 795

          token 是自带过期时间的校验,一般处理就是请求头加入 token ,响应中如果 401 就返回请求token的页面或者调用一下接口存一下

            撰写回答

            登录后参与交流、获取后续更新提醒