环境

vue项目,axios, JwtToken

问题

前端页面长时间登录未操作后, 发送请求无反应,发送任何请求无返回体问题。

问题重现

在使用axios过程中通常会使用拦截器来统一过滤一些异常返回,例如一下代码:

axios.interceptors.response.use(
  function (response) {
    loadingInstance.close();
    return response;
  },
  function (error) {
    // Do something with response error
    loadingInstance.close();

    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.log('401, logout.');
          // 401 清除token信息并跳转到登录页面
          store.commit('user/clearUser');
          router.replace({
            path: '/',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        case 403:
          // 403 无权限,跳转到首页
          router.replace({
            path: '/home',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
      }
    }
    return Promise.reject(error);
  }
);

在以上axios拦截器配置中,通过拦截返回体的错误状态(error.response.status),就可以统一对token过期的401情况进行处理。当token过期的时候,再发送请求,就会进入拦截器实现自动退出登录的功能。

但是,当页面长时间打开,等到第二天再使用的时候。就会出现,点击任何地方都报错,并且也不会退出登录的情况。
通过查看请求返回信息,发现根本就没有返回体,那么自然我们的拦截器就拦截不到token过期的情况。
找到原因之后,在拦截器中添加一下代码:

axios.interceptors.response.use(
  function (response) {
    loadingInstance.close();
    return response;
  },
  function (error) {
    // Do something with response error
    loadingInstance.close();

    if (error.response) {
      let isLogin = store.getters['user/isLogin'];
      switch (error.response.status) {
        case 401:
          console.log('401, logout.');
          // 401 清除token信息并跳转到登录页面
          store.commit('user/clearUser');
          router.replace({
            path: '/',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        case 403:
          // 403 无权限,跳转到首页
          router.replace({
            path: '/home',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
      }
    } else {  // 如果没有返回体,退出登录
      store.commit('user/clearUser');
      router.replace({
        path: '/',
        query: { redirect: router.currentRoute.fullPath }
      });
      console.log('no response, logout.');
    }

    return Promise.reject(error);
  }
);

就是说,当返回信息没有请求体的时候,直接退出登录。这样就解决了这个诡异的问题。


vanessa
15 声望0 粉丝