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