vue如何在token过期之后跳转到登录页面，且不影响其他无需携带token的接口数据访问

事情是这样的，最近做了一个类似于商城的项目。本来测试是没有问题的，后来过了大概三四天的时间没有在浏览器中打开过，再打开以后，在未登录情况下打开商城首页报了一大堆的错误。
错误信息

出现问题的原因

默认情况下商城首页，无需登录即可打开，也就是说访问后台接口不需要携带token。但是用户在上一次登录系统访问页面后，没有退出系统，直接关闭了浏览器，导致本地存储器仍然存储着旧的token，当你再次打开该系统进入首页后，访问后台的接口会携带旧的token，导致报错：（状态码是401，token 过期导致），但是这几个接口都是不应该携带token的，按道理后台应该把这个规避掉，但后台说处理不了，所以只能自己处理了。

解决思路

作为小白的我，绞尽脑汁想了一个笨办法，虽然也解决了，但真他娘的累
思路（针对不同的接口，给予不同的axios对象，一个携带token，一个不携带token，然后将需要携带token的那个axios对象设置拦截器，如果token过期，就跳转到登录页面）。

步骤1：设置两个.js文件，在每个文件中创建axios全局对象。

在这里插入图片描述

代码如下

需要携带token的axios

// An highlighted blockimport axios from 'axios'
import router from '../router'var axios1 = axios.create({timeout:6000
})
axios1.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios1.defaults.baseURL = 'https://127.0.0.1:12000';
let token = JSON.parse(localStorage.getItem('token'));
if (token) {axios1.defaults.headers.common["Authorization"] = "JWT " + token;
}// 添加响应拦截器
axios1.interceptors.response.use(function (response) {return response;}, function (error) {if(error.response.status===401){alert("登录信息已过期，请重新登录")router.replace({path: '/start/login/personlogin' // 到登录页重新获取token})localStorage.removeItem('token')localStorage.removeItem('user')}return Promise.reject(error);});
export default axios1;

不需要携带token的axios

import axios from 'axios'var instance = axios.create({baseURL:'https://127.0.0.1:12000',timeout:6000})
instance.defaults.headers.post['Content-Type'] ='application/json;charset=UTF-8'export default instance;