vue拦截器刷新登陆页面_vue中实现token失效后自动跳转至登录页解决方案

近期，在

对于这个问题，一些人都提出了自己的解决方案，如：使用Vuex进行状态托管；加一个全局的守卫；在根节点加一个导航守卫；使用sessionStorange等等，结果都被否定了，这些都根本不可取，原因是：使用守卫时，需要触发点击操作进行监听，而这里并不需要点击监听，刷新也要实现该功能；sessionStorange用于本地存储一个会话(session)中的数据，当浏览器关闭后才会消失。

经过对Vue的工作原理进行分析后，小编给出了一个完美的解决方案，这里分享给大家！

对于这个问题，vue-resource的interceptors拦截器的作用正是解决此需求的妙方。要是有人使用axios中的interceptors的话，方法都是一样。

在每次http的请求响应之后，如果设置了拦截器，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给

then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断，来决定是跳转到登录页面还是留在当前页面继续获取数据。

Vue.http.interceptors.push((request, next) => { //在请求前可以做一些预处理

function getCookie(c_Name){

if(document.cookie.length >0) {

let c_start= document.cookie.indexOf(c_Name+"=")；

if(c_start!=-1){

c_start=c_start+c_Name.length +1；

let c_end= document.cookie.indexOf(";", c_start)；

if (c_end==-1) c_end= document.cookie.length

return unescape(document.cookie.substring(c_start, c_end))；

}

}

return ""；

}

let tokens=getCookie("x-token")；

if (tokens) {

request.headers.set('x-token', tokens)；

}else{

router.replace({path:"/"});

}

next((response) => {

/*在响应之后传给then之前对response进行修改和逻辑判断。

对于token时候已过期的判断，

就添加在此处，页面中任何一次http请求都会先调用此处方法*/

// response.data = '...';

if (response.data.errorCode!==0) { //与后台约定登录失效的返回码

return ;

}

return response;

});

});

此处的getCookie函数是获取token，并对获取到的token进行处理，处理成标准格式。

接下来对获取的token进行判断，如果token未过期，即token存在，则将token添加到请求头，即代码里的request.headers.set(‘x-token’, tokens)；如果token已过期，则直接跳到登录页，即代码里的router.replace({path:”/”});。

以上这些是在放在请求数据前，对数据做一些预处理。

接下来，在响应之后传给then之前对response进行修改和逻辑判断。此处判断的作用是：判断用户在每次调用后台数据，请求后台接口时，都进行监听，判断errorCode，如果errorCode为0，则数据接口请求成功，会将数据返回至客户端，然后才能进行接下来的操作。否则，接口请求失败，对数据进行拦截。注：这里errorCode的返回值是后台定的。

好了，到此，这个功能就轻松的实现了！

原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/361