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

Question

需求:在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的接口,这个时候点击事件的接口的数据返回来了,但视图没有去更新, 请问大家知道这种情况该怎么处理吗

Answer 1

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