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

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

出现问题的原因

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

解决思路

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

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

代码如下

需要携带token的axios

// An highlighted block


import 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;

• 最后，接受前端大神的无情嘲笑，如果有更好的办法，提议一下。哈哈~~·