token长时间过时后,请求无返回体问题

环境

vue项目,axios, JwtToken前端

问题

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

问题重现

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

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过时的时候,再发送请求,就会进入拦截器实现自动退出登陆的功能。axios

可是,当页面长时间打开,等到次日再使用的时候。就会出现,点击任何地方都报错,而且也不会退出登陆的状况。
经过查看请求返回信息,发现根本就没有返回体,那么天然咱们的拦截器就拦截不到token过时的状况。
找到缘由以后,在拦截器中添加一下代码:code

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);
  }
);

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

相关文章
相关标签/搜索