vue攔截器兼容性處理

這次給大家帶來vue攔截器兼容性處理，使用vue攔截器兼容的注意事項有哪些，下面就是實戰案例，一起來看一下。愛掏網 - it200.com

項目中使用vue搭建前端頁面，并通過axios請求后臺api接口，完成數據交互。愛掏網 - it200.com如果驗證口令token寫在在每次的接口中，也是個不小的體力活，而且也不靈活。愛掏網 - it200.com這里分享使用vue自帶攔截器，給每次請求的頭部添加token，而且兼容了IE9。愛掏網 - it200.com

import?axios?from?'axios';
//?這里的config包含每次請求的內容，在這里把token放到請求頭
axios.interceptors.request.use(function?(config)?{?
??let?token?=?window.localStorage.getItem("tokenid");?//從緩存中取token
??if?(token)?{
????config.headers.Authorization?=?token;??//將token放到請求頭發送給服務器
????//這里主要是為了兼容IE9
????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")?{?
??　　　　//這里需要排除登陸(或者說是第一次請求獲取token)的時候的請求驗證，我這里沒做處理
　　　　　?//我的后臺api接口，并沒有對login接口做token驗證，所以這里不做處理
????}?else?{??　　　　
??　　　　//除登陸接口外，其他需要token驗證的方法，會走這里且返回null
??????return?null;
????}
??}
??return?config;
},?function?(err)?{
??//?return?Promise.reject(err);
});
//?http?response?攔截器
axios.interceptors.response.use(
??response?=>?{
????return?response;?//請求成功的時候返回的data
??},
??error?=>?{
????try?{
??????if?(error.response)?{
????????switch?(error.response.status)?{
??????????case?401://token過期，清除token并跳轉到登錄頁面
????????????localStorage.clear();
????????????var?baurl?=?window.location.href;
????????　　　　　router.replace({
????????????????path:?'login',
????????????????query:?{?backUrl:?baurl?}
??????????????});???????????
????????????return;
????????}
??????}
??????return?Promise.reject(error.response.data)
????}
????catch?(e)?{
????}
??});

　　寫在后面。愛掏網 - it200.com因為我的token放在了緩存中，所以在每次請求前，我會先在前端取出token，并驗證其時效性，如果過期或不存在會先跳轉到登陸頁，而不會走攔截器去請求請求。愛掏網 - it200.com具體也參考mounted()方法。愛掏網 - it200.com

相信看了本文案例你已經掌握了方法，更多精彩請關注愛掏網 - it200.com其它相關文章！

推薦閱讀：

utils.js使用案例詳解

怎樣使用Vue操作DIV

以上就是vue攔截器兼容性處理的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！