vue-cli-service Axios 持续返还401

本文主要是介绍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);
});

错误重现过程：

打开后台、前端开发模式（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);
});