vue項目中axios如何捕捉http狀態(tài)碼為401錯誤問題

更新時間：2024年03月08日 16:17:56 作者：weixin_49696014

這篇文章主要介紹了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) {
// 這個是處理響應成功的結果，也就是說響應狀態(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 范圍內的狀態(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)
})
``