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