Vue攔截器原理以及詳細(xì)使用方法
攔截器原理和作用
首先攔截器在src/utils/request.js 文件中,攔截器分為請(qǐng)求攔截器和響應(yīng)攔截器。
頁(yè)面中的每一個(gè)請(qǐng)求都會(huì)經(jīng)過(guò)請(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ì)比較增加無(wú)效代碼,所以我們可以在數(shù)據(jù)響應(yīng)的時(shí)候判斷,給他人為的去掉一層,如下面判斷 return data ,這樣就可以直接res.data.變量
還有一個(gè)是token 處理 這里包含了主動(dòng)處理:登錄時(shí)候存一個(gè)時(shí)間,判斷這個(gè)時(shí)間,超過(guò)就調(diào)用登出方法,提示信息,打回到登錄頁(yè)。被動(dòng)處理:異常的時(shí)候判斷一下,如果是和后端規(guī)定好的token過(guò)期狀態(tài)碼(比如401),就調(diào)用登出方法,提示信息,打回到登錄頁(yè)。
基地址最好不要寫死寫變量名,這樣我們就可以通過(guò)改環(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)求的信息 // 判斷有沒(méi)有token if (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 // 判斷是否超過(guò)1小時(shí) if (hour >= 1) { // 代表token過(guò)期 await store.dispatch('user/logout') Message.error('token已過(guò)期,請(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)回來(lái)的所有信息 // 所有的接口請(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)過(guò)期,請(qǐng)重新登錄!') router.push('/login') } else { return Promise.reject(error) } } // error => { // return Promise.reject(error) // } ) // 暴露副本 export default service
瀏覽器存取
總結(jié):
經(jīng)過(guò)這一趟流程下來(lái)相信你也對(duì) Vue 攔截器原理和詳細(xì)使用 有了初步的深刻印象,但在實(shí)際開發(fā)中我 們遇到的情況肯定是不一樣的,所以我們要理解它的原理,萬(wàn)變不離其宗。
到此這篇關(guān)于Vue攔截器原理以及詳細(xì)使用方法的文章就介紹到這了,更多相關(guān)Vue攔截器原理使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
手把手搭建安裝基于windows的Vue.js運(yùn)行環(huán)境
手把手教大家搭建安裝基于windows的Vue.js的運(yùn)行環(huán)境,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06element select實(shí)現(xiàn)組件虛擬滾動(dòng)優(yōu)化
本文主要介紹了element select實(shí)現(xiàn)組件虛擬滾動(dòng)優(yōu)化,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例
在實(shí)際項(xiàng)目開發(fā)中,我們經(jīng)常會(huì)遇到選項(xiàng)卡切換,對(duì)于一個(gè)前端工程師來(lái)說(shuō),組件化/模塊化開發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下2023-05-05vue如何通過(guò)插槽組件之間數(shù)據(jù)傳遞
這篇文章主要介紹了vue如何通過(guò)插槽組件之間數(shù)據(jù)傳遞問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue-router如何實(shí)現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實(shí)現(xiàn)history模式配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06