vue項目中axios如何捕捉http狀態(tài)碼為401錯誤問題
vue axios捕捉http狀態(tài)碼為401錯誤
項目開發(fā)中,需要判斷一下token是否有效,如果是一個無效的token,那么后臺后返給我http狀態(tài)碼為401的錯誤,注意這里是http狀態(tài)碼,也就說只有是2xx系列的才算是請求成功,所以返回的401,此時瀏覽器肯定時報錯的,如果你正常的邏輯去拿包,肯定是拿不到的。
這種情況下,就要用到axios的響應攔截了
在main入口文件下寫
// 響應攔截 axios.interceptors.response.use(function (response) { // 這個是處理響應成功的結(jié)果,也就是說響應狀態(tài)碼為2XX系列的 NProgress.done() // 這個忽略,只是一個響應的進度條 return response; },function (error) { // 這個是處理響應失敗的,也就是響應錯誤的,在這個箭頭函數(shù)中,才能拿到401狀態(tài)下的包 NProgress.done() if (error.response.status === 401) { // 接口的根地址截取下來,判斷 const url = error.response.config.url const flag = url.substring(0,url.indexOf('/')) // 判斷地址是哪一個頁面的,push到相應的錯誤頁面 if(flag == 'roster'){ router.push({ path:'/rosterError', query:{ info: error.response.data.message } }) } if(flag == 'user'){ router.push({ path:'/AllUserinfoEerror', query:{ info: error.response.data.message } }) } } return Promise.reject(error); });
vue全局響應攔截器401報錯
在處理全局響應攔截器的時候,處理401,錯誤,嘗試了各種方法,但是都沒有效果。
最終,各種方式試過了,修改axios的版本,解決了問題。
axios": "0.18.1"
人麻了?。。。?!
// 添加響應攔截器 instance.interceptors.response.use((response) => { // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。 // 對響應數(shù)據(jù)做點什么 (默認axios會多包裝一層data,需要響應攔截器中處理一下) const res = response.data return res }, (error) => { // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。 if (error.response.status === 401) { console.log('登錄狀態(tài)無效,請重新登錄') return Promise.reject(error) } Message.error(error.message) return Promise.reject(error) }) ``
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-06-06vue使用axios導出后臺返回的文件流為excel表格詳解
這篇文章主要介紹了vue使用axios導出后臺返回的文件流為excel表格方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue+element-ui集成隨機驗證碼+用戶名+密碼的form表單驗證功能
在登入頁面,我們往往需要通過輸入驗證碼才能進行登入,那我們下面就詳講一下在vue項目中如何配合element-ui實現(xiàn)這個功能,需要的朋友可以參考下2018-08-08Vue通過WebSocket建立長連接的實現(xiàn)代碼
這篇文章主要介紹了Vue通過WebSocket建立長連接的實現(xiàn)代碼,文中給出了問題及解決方案,需要的朋友可以參考下2019-11-11基于Echarts圖表在div動態(tài)切換時不顯示的解決方式
這篇文章主要介紹了基于Echarts圖表在div動態(tài)切換時不顯示的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用
本篇文章主要介紹了windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06