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;

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

token 过期解决相关推荐

Token实现登录、token过期解决以及数据解析
什么是token? token我们可以理解为一个令牌,主要的作用是守护我们系统的安全,像我们登录这些都是可以使用token进行用户数据校验的,那么为什么不用传统的session呢?主要 ...
Retrofit 通过刷新头部Token解决token过期
需求分析: 使用token来维持用户登陆状态是很常见的,但应当明确后台设置的token也都是有一定期限的,假如说是7天,那么我们的用户信息的获取必然是和token相绑定的,所以不可避免的我们的Andr ...
如何解决前后端token过期问题
问题描述: 首先后端生成的token是有时限的,在一段时间后不管前端用户是否进行了访问后端的操作,后端的token都会过期,在拦截器阶段就会返回错误的请求:token过期,从而拿不到想要的请求数据. ...
详解token已过期含义及解决方 token过期是否需要重新登录
详解token已过期含义及解决方 token过期是否需要重新登录Web应用和用户的身份验证息息相关,从单一服务器架构到分布式服务架构再到微服务架构,用户安全认证和授权的机制也一直在演进,下文对各个架构 ...
vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...
jwt token 过期刷新_如何在SpringBoot中集成JWT(JSON Web Token)鉴权
这篇博客主要是简单介绍了一下什么是JWT,以及如何在Spring Boot项目中使用JWT(JSON Web Token). 1.关于JWT 1.1 什么是JWT 老生常谈的开头,我们要用这样一种工具 ...
JAVA开发（token过期续期）
一.需求背景: 在使用token进行登录的过程中,如果token过期了,需要重新输入用户名和密码登录,这种体验肯定是不好的,因为如果一直在使用系统,系统应该一直能够保持登录状态,而不是用着用着就突然退 ...
Spark与hdfs delegation token过期的排查思路总结
背景 hadoop delegation token的问题相对比较混乱和复杂,简单说下这东西的出现背景,最早的hadoop的因没有的完善的安全机制(安全机制主要包括:认证 + 鉴权,hadoop这里主 ...
Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1. 在vueresource情况下设置t ...

token 过期解决