vue拦截器的兼容性处理(vue兼容性问题)

这一次，我将为您带来vue拦截器兼容性处理。使用vue拦截器兼容性有哪些注意事项？以下是实际案例。让我们看一看。

项目中使用vue搭建前台页面，axios请求后台api接口完成数据交互。如果把验证口令令牌写在每个接口里，也是大量的体力劳动，不灵活。在这里，共享使用vue自带的拦截器在每个请求的头部添加token，并且兼容IE9。

从& # 039；导入axiosaxios & # 039；//这里的配置包含每个请求的内容。这里，将令牌放在请求头axios . interceptors . request . use(function(config){ let token = window . local storage . getitem(" token id & quot；);//从缓存中获取token if(token){ config . headers . authorization = token；//将令牌放入请求头并发送给服务器//这主要是为了兼容ie 9 var Browser = navigator . appname；var b _ version = navigator . appversion；if(browser = = & # 039；网景& # 039；& amp& ampb _ version . index of(& # 039；；')& lt0){//Firefox } else { if(b _ version . index of(& # 039；；')& lt0) {返回配置；} var version = b _ version . split(& quot；；");var trim_Version = version[1]。替换(/[ ]/g，& quot");if(browser = = & quot；Microsoft Internet Explorer & quot；& amp& amptrim _ Version = = & quotMSIE9.0 & quot){//IE9 if(config . URL . index of(& # 039；？')& gt0){ config . URL = config . URL+& quot；& amptoken = & quot+ JSON.parse(token)。价值；} else { config . URL = config . URL+& quot；？token = & quot+ JSON.parse(token)。价值；} } } } else { local storage . clear()；//清除缓存if(router . current out . name & amp；router . current out . name . to lower case()= = & quot；登录& quot){//登录时需要排除请求验证(或者第一次要求token)。我不是在这里做的。//我的后台api接口没有对登录接口做令牌验证，这里不做了。} else {//除了登录接口，其他需要令牌验证的方法就到此为止，返回null返回null；} }返回配置；}，function(err){//return promise . reject(err)；});// http响应拦截器axios . interceptors . response . use(response = >；{返回响应；//请求成功时返回的数据}，error = >；{ try { if(error . response){ switch(error . response . status){ case 401://token过期，清除令牌，跳转到登录页面local storage . clear()；var baurl = window . location . href；router . replace({ path:& # 039；登录& # 039；，查询:{ backUrl:baurl } })；返回；} } return promise . reject(error . response . data)} catch(e){ } }；写在后面。因为我的令牌是放在缓存里的，所以每次请求之前，我都会在前端把令牌拿出来，验证它的时效性。如果过期或者不存在，我会先跳转到登陆页面，而不是通过拦截器提出请求。有关详细信息，另请参见mounted()方法。

相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

utils.js用例的详细解释

如何用Vue操作DIV