后端:
- 在登录超时或没有登录的情况,所有请求都会拒绝并且返还HTTP状态码
401
前端:
- 前端将认证的Token放到loadStorage中,在认证失效时候清空。
- 在接到HTTP状态码为401时,自动的跳转到登录页面,因此有了下面 axios 的全局拦截器
import axios from 'axios';
import router from './router'
// 全局在处理到未认证的错误时统一进入回到根路径
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
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) {
// 2xx 范围内的状态码都会触发该函数。
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
if (error.response.status == 401) {
if (router.currentRoute.value.path != '/') {
router.replace("/")
}
// 刷新页面
location.reload()
// 返回空表示不再需要后续链路处理
return null;
}
return Promise.reject(error);
});
问题得到解决。