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

相關文章
相關標籤/搜索