攔截器原理和作用

• 首先攔截器在src/utils/request.js 文件中，攔截器分為請求攔截器和響應攔截器。

• 頁面中的每一個請求都會經過請求攔截和響應攔截，所以一般在這個文件進行操作。

• 這一文件一般引入axios，vuex，Message，router 和相關方法 ，基地址+攔截器。

• 請求攔截器：Token的主動處理 給每一個請求添加請求頭token 對請求異常拋出。

• 響應攔截器：簡化axios默認加了一層的data Token被動處理 對請求異常拋出。

---

最簡化版本

// 導入axios import axios from 'axios'// 基地址 const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,// 5秒超時timeout: 10000 })// 請求攔截 request.interceptors.request.use(config => {return config},error => {return Promise.reject(error)} )// 響應攔截 request.interceptors.response.use(res => {return res},// 響應錯誤的代碼寫這里error => {return Promise.reject(error)} )// 暴露副本 export default service

下面是實際開發中使用

注意：

當我們使用axios時候，他會給我們默認加一層data。這樣我們取數據的時候就會比較增加無效代碼，所以我們可以在數據響應的時候判斷，給他人為的去掉一層，如下面判斷 return data ，這樣就可以直接res.data.變量

還有一個是token 處理 這里包含了主動處理：登錄時候存一個時間，判斷這個時間，超過就調用登出方法，提示信息，打回到登錄頁。被動處理：異常的時候判斷一下，如果是和后端規定好的token過期狀態碼（比如401），就調用登出方法，提示信息，打回到登錄頁。

基地址最好不要寫死寫變量名，這樣我們就可以通過改環境文件快速更改地址。

// 導入axios import axios from 'axios' // 導入提示信息 import { Message } from 'element-ui' // 導入vuex import store from '@/store' // 導入路由 import router from '@/router' // 導入獲取時間和token的工具函數 import { getToken, getTokenTime } from '@/utils/auth'// 基地址 const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,// 5秒超時timeout: 10000 }) // 請求攔截 // 添加一個service的請求攔截器 service.interceptors.request.use(async config => {// config就是本次發請求的信息// 判斷有沒有tokenif (store.state.user.token) {// token失效的主動處理// 獲取一下記錄token的時間let start = getTokenTime()// 獲取一下當前時間let now = Date.now()// 算出時間差let hour = (now - start) / 1000 / 3600// 判斷是否超過1小時if (hour >= 1) {// 代表token過期await store.dispatch('user/logout')Message.error('token已過期,請重新登錄')router.push('/login')// return代表不往下執行，所以這個請求不會發送return}config.headers.Authorization = 'Bearer ' + getToken()config.headers['Bearer'] = getToken()// config.headers.tenantid = getTenantId ()}// 發送請求return config},error => {return Promise.reject(error)} ) // 響應攔截 service.interceptors.response.use(res => {// axios默認加了一層data// 這個res包括這個請求響應回來的所有信息// 所有的接口請求都會回到這里// 獲取到本次請求得到的數據const data = res.data// 會幫所有的請求打印// console.log(data);// 判斷本次請求是否成功if (data.code === 200 || data.code == 0) {// 如果響應成功，則正常給他返回數據return data} else {// 證明失敗，我們需要讓外面的catch被調用// 要讓catch被調用，就要手動拋出一個錯誤，并把服務器返回的消息拋回去Message.warning(data.message || data.msg)return Promise.reject(data.message)}},async error => {// token失效的被動處理console.log(error)if (error.response.data.code === 401) {await store.dispatch('user/logout')Message.warning('登錄狀態過期，請重新登錄！')router.push('/login')} else {return Promise.reject(error)}}// error => {// return Promise.reject(error)// } ) // 暴露副本 export default service

瀏覽器存取

---

總結：

經過這一趟流程下來相信你也對 Vue 攔截器原理和詳細使用 有了初步的深刻印象，但在實際開發中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

什么不足的地方請大家指出謝謝 -- 風過無痕

總結

以上是生活随笔為你收集整理的Vue 拦截器原理和详细使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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