一区二区日本_久久久久久久国产精品_无码国模国产在线观看_久久99深爱久久99精品_亚洲一区二区三区四区五区午夜_日本在线观看一区二区

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其它相關文章!

聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
發表評論
更多 網友評論0 條評論)
暫無評論

返回頂部

主站蜘蛛池模板: 国产成人免费视频网站视频社区 | 老司机深夜福利网站 | 极品久久 | www日韩欧美 | 亚洲国产成人av好男人在线观看 | 99在线免费观看视频 | 一区视频在线 | 欧美三级在线 | 日韩综合在线视频 | 久久久久久国产免费视网址 | 国产91九色| 颜色网站在线观看 | av天天干 | 久久久久久蜜桃一区二区 | 99亚洲国产精品 | 精品日韩一区二区 | 国产精品欧美一区二区三区 | 精品中文字幕视频 | 久久精品久久精品 | 久久青草av | 国产精品xxxx| 久草欧美| 男女羞羞视频免费看 | 成人免费看片又大又黄 | 日韩美女一区二区三区在线观看 | 热久久性 | 伊人二区 | 久久久91 | 日日干日日操 | 日韩视频二区 | 亚洲免费视频在线观看 | 国产午夜精品一区二区三区嫩草 | 91网视频 | 国产毛片在线看 | 久久国产欧美日韩精品 | 久久99精品久久久久久国产越南 | 精品伊人久久 | 国产aⅴ爽av久久久久久久 | 亚洲五码在线 | 天天视频一区二区三区 | 久久综合久久久 |