這次給大家帶來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其它相關文章!
聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。