Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量。而vue 拦截器interceptors正好可以解决我们的需求。1. 在vueresource情况下 设置token拦截器。Vue.http.interceptors.push(function (request, next) {let token = localStorage.g...
·
最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量。而vue 拦截器interceptors正好可以解决我们的需求。
1. 在vueresource情况下 设置token拦截器。
Vue.http.interceptors.push(function (request, next) {
let token = localStorage.getItem("x-auth-token");
if (token) {
request.headers.set('token', token);
}
if (request.url.indexOf(url) === -1) {/*增加时间标记,兼容IE*/
let getTimestamp=new Date().getTime();
if(request.url.indexOf('?')>-1){
request.url = url + request.url +"×tamp="+getTimestamp;
}else{
request.url = url + request.url +"?timestamp="+getTimestamp;
}
}
next(response => {
if(response.body.code==-1&&response.status==200){
this.$message({showClose: true, message:response.data.msg, type: 'warning'});
};
if (response.status >= 400) {/*在此处判断token过期,以及其他状态码设置跳转页面*/
if (response.status === 401) {
me.handleUnauthorized()
} else if (response.status === 403) {
me.handleForbidden()
} else {
me.handleServerError(response)
}
} else {
if (response.data.code !== 0) {
me.handleApiError(response)
}
}
me.resetToken(response);
return response
});
2.如果使用的是axios情况是,设置token是下面的方法。
axios.interceptors.request.use(/*这是拦截器设置tokne*/
config => {
let token = localStorage.getItem("x-auth-token");
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.token = `${token}`;
}
if (config.url.indexOf(url) === -1) {
let getTimestamp=new Date().getTime();
if(config.url.indexOf('?')>-1){
config.url = url + config.url +"×tamp="+getTimestamp;
}else{
config.url = url +config.url +"?timestamp="+getTimestamp;
}
}
return config;
},
err => {
alert(err)
return Promise.reject(err);
});
下面这张图是设置对于token过期的处理
axios.interceptors.response.use(
response => {/*在这里可以设置请求成功的一些设置*/
let newToken=response.config.headers.token
localStorage.setItem('x-auth-token', newToken);
if(response.data.code==-1&&response.status==200){
this.$message({showClose: true, message:response.data.msg, type: 'warning'});
};
return response;
},
error => {/*在这里设置token过期的跳转*/
if (error.response) {
if(error.response.data.code==401){
this.$router.push('/login');
}
}
});
如果有哪里遗漏了请各位在下面留言都会回复
更多推荐
已为社区贡献28条内容
所有评论(0)