vue-cli-service Axios 持续返还401

后端：

• 在登录超时或没有登录的情况，所有请求都会拒绝并且返还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);
});

错误重现过程：

1. 打开 后台 、前端开发模式（npm run serve）。
2. 通过前端登录页面进入系统。
3. 重启后台服务器，该操作将会导致前端存储的Token失效。
4. 在前端刷新页面，由于token失效，返回了401的状态码，被全局的拦截器截取到，并替换路由到/。
5. 在登录页再次登录，无论怎么登录都返还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);
});

问题得到解决。