攔截器原理和作用

• 首先攔截器在src/utils/request.js 文件中，攔截器分為請(qǐng)求攔截器和響應(yīng)攔截器。

• 頁面中的每一個(gè)請(qǐng)求都會(huì)經(jīng)過請(qǐng)求攔截和響應(yīng)攔截，所以一般在這個(gè)文件進(jìn)行操作。

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

• 請(qǐng)求攔截器：Token的主動(dòng)處理 給每一個(gè)請(qǐng)求添加請(qǐng)求頭token 對(duì)請(qǐng)求異常拋出。

• 響應(yīng)攔截器：簡(jiǎn)化axios默認(rèn)加了一層的data Token被動(dòng)處理 對(duì)請(qǐng)求異常拋出。

---

最簡(jiǎn)化版本

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

下面是實(shí)際開發(fā)中使用

注意：

當(dāng)我們使用axios時(shí)候，他會(huì)給我們默認(rèn)加一層data。這樣我們?nèi)?shù)據(jù)的時(shí)候就會(huì)比較增加無效代碼，所以我們可以在數(shù)據(jù)響應(yīng)的時(shí)候判斷，給他人為的去掉一層，如下面判斷 return data ，這樣就可以直接res.data.變量

還有一個(gè)是token 處理 這里包含了主動(dòng)處理：登錄時(shí)候存一個(gè)時(shí)間，判斷這個(gè)時(shí)間，超過就調(diào)用登出方法，提示信息，打回到登錄頁。被動(dòng)處理：異常的時(shí)候判斷一下，如果是和后端規(guī)定好的token過期狀態(tài)碼（比如401），就調(diào)用登出方法，提示信息，打回到登錄頁。

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

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

瀏覽器存取

---

總結(jié)：

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

什么不足的地方請(qǐng)大家指出謝謝 -- 風(fēng)過無痕

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。