vue拦截器刷新登陆页面

页面"/>

vue拦截器刷新登陆页面

因为需要进行登录判定，需要在任何一个页面任何一次http请求，增加对token的判断，如果token已过期或者不存在，需要跳转至登录页面。设置全局拦截器就可以一次性实现这个需要；在登录页请求的时候，将token放到sessionStorage；在main.js写上以下代码：

newVue({

el:'#app',

router,

render:h=>h(App)

})

Vue.http.interceptors.push((request,next)=>{

// 登录成功后将后台返回的TOKEN在本地存下来,每次请求从sessionStorage中拿到存 储的TOKEN值

let TOKEN=sessionStorage.getItem('token');

if(TOKEN){

// 如果请求时TOKEN存在,就为每次请求的headers中设置好TOKEN,后台根据headers中的TOKEN判断是否放行

request.headers.set('token',TOKEN);

}

next((response)=>{

if(response.body.code===10010){//与后台约定登录失效的返回码

let data=response.body.data

window.location.href=data

}

return response;

})

})

但是，这样设置拦截器的话，一刷新界面，就会出现问题了，请求的数据出不来，拦截器函数根本就进不去，token拿不到，咦，这怎么办，嘿嘿，把拦截器函数放到实例上面就可以了，先让拦截器执行哟：

Vue.http.interceptors.push((request,next)=>{

// 登录成功后将后台返回的TOKEN在本地存下来,每次请求从 sessionStorage中拿到存储的TOKEN值

let TOKEN=sessionStorage.getItem('token');

if(TOKEN){

// 如果请求时TOKEN存在,就为每次请求的headers中设置好TOKEN,后台根据headers中的TOKEN判断是否放行

request.headers.set('token',TOKEN);

}

next((response)=>{

if(response.body.code===10010){//与后台约定登录失效的返回码

var data=response.body.data

window.location.href=data

}

return response;

})

})

newVue({

el:'#app',

router,

render:h=>h(App)

})```