后端:
- 在登录超时或没有登录的情况,所有请求都会拒绝并且返还HTTP状态码
401
前端:
- 前端将认证的Token放到loadStorage中,在认证失效时候清空。
- 在接到HTTP状态码为401时,自动的跳转到登录页面,因此有了下面 axios 的全局拦截器
import axios from 'axios';
import router from './router'
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (error.response.status == 401) {
if (router.currentRoute.value.path != '/') {
router.replace("/")
}
return null;
}
return Promise.reject(error);
});
错误重现过程:
- 打开 后台 、前端开发模式(
npm run serve
)。 - 通过前端登录页面进入系统。
- 重启后台服务器,该操作将会导致前端存储的Token失效。
- 在前端刷新页面,由于token失效,返回了401的状态码,被全局的拦截器截取到,并替换路由到
/
。 - 在登录页再次登录,无论怎么登录都返还401.
Chrome Network 抓包结果如下
Wireshark抓包结果如下
后台日志: 没有任何输出,通过Wireshark抓包发现并没有流量到后端。
问题解决
刷新页面
因此我推测前端可能存在问题,排查了许久,没有找到原因,在无奈之下只能手动刷新前端页面
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (error.response.status == 401) {
if (router.currentRoute.value.path != '/') {
router.replace("/")
}
location.reload()
return null;
}
return Promise.reject(error);
});
问题得到解决。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)