快捷導(dǎo)航

vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題

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

這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue axios捕捉http狀態(tài)碼為401錯(cuò)誤

項(xiàng)目開(kāi)發(fā)中，需要判斷一下token是否有效，如果是一個(gè)無(wú)效的token，那么后臺(tái)后返給我http狀態(tài)碼為401的錯(cuò)誤，注意這里是http狀態(tài)碼，也就說(shuō)只有是2xx系列的才算是請(qǐng)求成功，所以返回的401，此時(shí)瀏覽器肯定時(shí)報(bào)錯(cuò)的，如果你正常的邏輯去拿包，肯定是拿不到的。

這種情況下，就要用到axios的響應(yīng)攔截了

在main入口文件下寫(xiě)

// 響應(yīng)攔截
axios.interceptors.response.use(function (response) {
// 這個(gè)是處理響應(yīng)成功的結(jié)果，也就是說(shuō)響應(yīng)狀態(tài)碼為2XX系列的
  NProgress.done()	// 這個(gè)忽略，只是一個(gè)響應(yīng)的進(jìn)度條
  return response;
},function (error) {
// 這個(gè)是處理響應(yīng)失敗的，也就是響應(yīng)錯(cuò)誤的，在這個(gè)箭頭函數(shù)中，才能拿到401狀態(tài)下的包
  NProgress.done()
  if (error.response.status === 401) {
    // 接口的根地址截取下來(lái)，判斷
    const url = error.response.config.url
    const flag = url.substring(0,url.indexOf('/'))
    // 判斷地址是哪一個(gè)頁(yè)面的，push到相應(yīng)的錯(cuò)誤頁(yè)面
    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全局響應(yīng)攔截器401報(bào)錯(cuò)

在處理全局響應(yīng)攔截器的時(shí)候，處理401，錯(cuò)誤，嘗試了各種方法，但是都沒(méi)有效果。

最終，各種方式試過(guò)了，修改axios的版本，解決了問(wèn)題。

axios": "0.18.1"

人麻了?。。。?！

// 添加響應(yīng)攔截器
instance.interceptors.response.use((response) => {
  // 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么 (默認(rèn)axios會(huì)多包裝一層data，需要響應(yīng)攔截器中處理一下)
  const res = response.data
  return res
}, (error) => {
  // 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
  if (error.response.status === 401) {
    console.log('登錄狀態(tài)無(wú)效，請(qǐng)重新登錄')
    return Promise.reject(error)
  }
  Message.error(error.message)
  return Promise.reject(error)
})
``