參考axios官方文檔

// 響應攔截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范圍內的任何狀態代碼都會觸發此函數，這里主要用于處理響應數據response => {return response},// 任何超出2xx范圍的狀態碼都會觸發此函數，這里主要用于處理響應錯誤error => {const { status } = error.responseif (status === 401) { // 未授權} else if (status === 403) { // 沒有權限} else if (status === 404) { // 資源不存在Toast.fail({message: '請求資源不存在',forbidClick: true})} else if (status >= 500) { // 服務端異常Toast.fail({message: '服務端異常，請稍后重試',forbidClick: true})}// 將未處理的異常往外拋return Promise.reject(error)})

處理 token 過期

token過期后，如果發現存在user和token則發送 刷新token的請求，請求頭中攜帶上refresh_token的值，
請求成功后，把獲取到的最新的token設置給vuex容器中的user。
因為每次請求時，請求攔截器會從vuex容器中拿token。
這樣即使用戶token過期了，也會自動去發送刷新token的請求來獲取最新的token,而不需要用戶手動去登錄！

/* * 請求模塊 * */ import axios from 'axios' // 在非組件模塊中獲取store 必須采用這種方式 import store from '../store/index.js' import JSONbig from 'json-bigint' import { Toast } from 'vant' import router from '../router'const request = axios.create({baseURL: '/api', // 基礎路徑transformResponse: [function (data) {// Do whatever you want to transform the data// console.log(data)// 后端返回的數據可能不是 JSON 格式字符串// 如果不是的話，那么 JSONbig.parse 調用就會報錯// 所以我們使用 try-catch 來捕獲異常，處理異常的發生try {// 如果轉換成功，則直接把結果返回return JSONbig.parse(data)} catch (err) {console.log('轉換失敗', err)// 如果轉換失敗了，則進入這里// 我們在這里把數據原封不動的直接返回給請求使用return data}// axios 默認在內部使用 JSON.parse 來轉換處理原始數據// return JSON.parse(data)}] })const refreshTokenReq = axios.create({baseURL: '/api' // 基礎路徑 }) // 請求攔截器 request.interceptors.request.use(function (config) {const { user } = store.state// 如果用戶已登錄，統一給接口設置tokenif (user) {config.headers.Authorization = `Bearer ${user.token}`}// 處理完之后一定要把config 返回，否則請求發不出去return config }, function (err) {return Promise.reject(err) })// 響應攔截器 request.interceptors.response.use(function (response) {// 響應成功進入這里return response }, async function (error) {// 響應失敗進入這里const status = error.response.statusif (status === 400) {// 客戶端請求參數錯誤Toast.fail('客戶端請求參數錯誤')} else if (status === 401) {// token無效// 如果沒有 user 或者 user.token， 直接去登錄const { user } = store.stateif (!user || !user.token) {// 直接跳轉到登錄頁面return redirectLogin()}// 使用refresh_token,則請求獲取新的tokentry {const { data } = await refreshTokenReq({method: 'PUT',url: '/app/v1_0/authorizations',headers: {Authorization: `Bearer ${user.refresh_token}`}})// 拿到新的token之后把它更新到容器中user.token = data.data.tokenstore.commit('setUser', user)// 把失敗的請求重新發送出去// error.config 是本次請求的相關配置項// 注意： 這里使用request發請求，它會走自己的請求攔截器，它的請求// 攔截器中通過store容器訪問token數據return request(error.config)// console.log(data)} catch (err) {// 刷新token都失敗了，直接跳轉到登錄頁redirectLogin()}} else if (status === 403) {// 沒有權限操作Toast.fail('沒有權限操作')} else if (status >= 500) {// 服務端異常Toast.fail('服務端異常，請稍后重試！')}// console.dir(error)return Promise.reject(error) })function redirectLogin () {router.replace('/login') }// 導出 export default request

登錄成功跳轉回原來頁面

首先在響應攔截器中：

注意：
router.currentRoute 和 我們在組件中獲取的this.$route是一個東西

// 響應攔截器 request.interceptors.response.use(// 響應成功進入第1個函數// 該函數的參數是響應對象function (response) {// Any status code that lie within the range of 2xx cause this function to trigger// Do something with response datareturn response},// 響應失敗進入第2個函數，該函數的參數是錯誤對象async function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response error// 如果響應碼是 401 ，則請求獲取新的 token// 響應攔截器中的 error 就是那個響應的錯誤對象console.dir(error)if (error.response && error.response.status === 401) {// 校驗是否有 refresh_tokenconst user = store.state.userif (!user || !user.refresh_token) {// router.push('/login') + redirectLogin()// 代碼不要往后執行了return}// 如果有refresh_token，則請求獲取新的 tokentry {const res = await axios({method: 'PUT',url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',headers: {Authorization: `Bearer ${user.refresh_token}`}})// 如果獲取成功，則把新的 token 更新到容器中console.log('刷新 token 成功', res)store.commit('setUser', {token: res.data.data.token, // 最新獲取的可用 tokenrefresh_token: user.refresh_token // 還是原來的 refresh_token})// 把之前失敗的用戶請求繼續發出去// config 是一個對象，其中包含本次失敗請求相關的那些配置信息，例如 url、method 都有// return 把 request 的請求結果繼續返回給發請求的具體位置return request(error.config)} catch (err) {// 如果獲取失敗，直接跳轉 登錄頁console.log('請求刷線 token 失敗', err)// router.push('/login') + redirectLogin()}}return Promise.reject(error)} )+ function redirectLogin () { + // router.currentRoute 當前路由對象，和你在組件中訪問的 this.$route 是同一個東西// query 參數的數據格式就是：?key=value&key=value + router.push('/login?redirect=' + router.currentRoute.fullPath) + }

然后在登錄成功以后：

const redirect = this.$route.query.redirect || "/"; this.$router.push(redirect);

總結

以上是生活随笔為你收集整理的Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及 登录成功跳转回原来页面问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。