这次给大家带来vue拦截器兼容性处理,使用vue拦截器兼容的注意事项有哪些,下面就是实战案例,一起来看一下。
项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互。如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活。这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import axios from 'axios' ;
axios.interceptors.request. use ( function (config) {
let token = window.localStorage.getItem( "tokenid" );
if (token) {
config.headers.Authorization = token;
var browser = navigator.appName;
var b_version = navigator.appVersion;
if (browser == 'Netscape' && b_version.indexOf( ';' ) 0) {
config.url = config.url + "&token=" + JSON.parse(token).value;
}
else {
config.url = config.url + "?token=" + JSON.parse(token).value;
}
}
}
} else {
localStorage.clear();
if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login" ) {
} else {
return null;
}
}
return config;
}, function (err) {
});
axios.interceptors.response. use (
response => {
return response;
},
error => {
try {
if (error.response) {
switch (error.response.status) {
case 401:
localStorage.clear();
var baurl = window.location.href;
router.replace({
path: 'login' ,
query: { backUrl: baurl }
});
return ;
}
}
return Promise.reject(error.response.data)
}
catch (e) {
}
});
|
写在后面。因为我的token放在了缓存中,所以在每次请求前,我会先在前端取出token,并验证其时效性,如果过期或不存在会先跳转到登陆页,而不会走拦截器去请求请求。具体也参考mounted()方法。
相信看了本文案例你已经掌握了方法。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。