淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用
更新時(shí)間：2018年02月28日 11:22:25 作者：_DangJin
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
項(xiàng)目背景
最近在項(xiàng)目開發(fā)中，遇到下面這樣一個(gè)問題：
- 在進(jìn)行銘感操作之前，每個(gè)請(qǐng)求需要攜帶token,但是token 有有效期，token 失效后需要換取新的token并繼續(xù)請(qǐng)求。
需求分析
- 每個(gè)請(qǐng)求都需要攜帶 token ，所以我們可以使用 axios request 攔截器，在這里，我們給每個(gè)請(qǐng)求都加 token,這樣就可以節(jié)省每個(gè)請(qǐng)求再一次次的復(fù)制粘貼代碼。
- token 失效問題，當(dāng)我們token 失效，我們服務(wù)端會(huì)返回一個(gè)特定的錯(cuò)誤表示，比如 token invalid，但是我們不能在每個(gè)請(qǐng)求之后去做刷新 token 的操作呀，所以這里我們就用 axios response 攔截器，我們統(tǒng)一處理所有請(qǐng)求成功之后響應(yīng)過來的數(shù)據(jù)，然后對(duì)特殊數(shù)據(jù)進(jìn)行處理，其他的正常分發(fā)。
功能實(shí)現(xiàn)
分析完問題后，我們來實(shí)現(xiàn)功能
安裝axios, 這里我們就贅述怎么安裝axios.
在 main.js 注冊(cè) axios
Vue.use(Vuex) Vue.use(VueAxios, axios) Vue.use(qs)
注：qs，使用axios，必須得安裝 qs，所有的Post 請(qǐng)求，我們都需要 qs,對(duì)參數(shù)進(jìn)行序列化。
在 request 攔截器實(shí)現(xiàn)
axios.interceptors.request.use(
config => {
config.baseURL = '/api/'
config.withCredentials = true // 允許攜帶token ,這個(gè)是解決跨域產(chǎn)生的相關(guān)問題
config.timeout = 2500
let token = sessionStorage.getItem('access_token')
let csrf = store.getters.csrf
if (token) {
config.headers = {
'access-token': token,
'Content-Type': 'application/x-www-form-urlencoded'
}
}
if (config.url === 'refresh') {
config.headers = {
'refresh-token': sessionStorage.getItem('refresh_token'),
'Content-Type': 'application/x-www-form-urlencoded'
}
}
return config
},
error => {
return Promise.reject(error)
}
)
在 response 攔截器實(shí)現(xiàn)
axios.interceptors.response.use(
response => {
// 定時(shí)刷新access-token
if (!response.data.value && response.data.data.message === 'token invalid') {
// 刷新token
store.dispatch('refresh').then(response => {
sessionStorage.setItem('access_token', response.data)
}).catch(error => {
throw new Error('token刷新' + error)
})
}
return response
},
error => {
return Promise.reject(error)
}
)
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
element表單驗(yàn)證如何清除校驗(yàn)提示語
本文主要介紹了element表單驗(yàn)證如何清除校驗(yàn)提示語，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue項(xiàng)目前端部署詳細(xì)步驟(nginx方式)
Nginx(engine x)是一個(gè)高性能的HTTP和反向代理web服務(wù)器,是部署前端項(xiàng)目的首選,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目前端部署(nginx方式)的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章介紹了Vue中的生命周期，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
詳解Vue項(xiàng)目中出現(xiàn)Loading chunk {n} failed問題的解決方法
這篇文章主要介紹了詳解Vue項(xiàng)目中出現(xiàn)Loading chunk {n} failed問題的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue3子組件上綁定(v-model="xx")父組件傳過來的值后報(bào)錯(cuò)解決
這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報(bào)錯(cuò)解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器)
這篇文章主要介紹了vue 內(nèi)置過濾器的使用總結(jié)(附加自定義過濾器)，詳細(xì)的介紹了各種過濾器的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
基于Vue實(shí)現(xiàn)封裝一個(gè)虛擬列表組件
正常情況下，我們對(duì)于數(shù)據(jù)都會(huì)分頁加載，最近項(xiàng)目中確實(shí)遇到了不能分頁的場景，如果不分頁，頁面渲染幾千條數(shù)據(jù)就會(huì)感知到卡頓，使用虛擬列表就勢在必行了。本文主要介紹了如何基于Vue實(shí)現(xiàn)封裝一個(gè)虛擬列表組件，感興趣的可以了解一下2023-03-03
要在Vue?3和Electron中實(shí)現(xiàn)本地化,可以使用類似于在Vue項(xiàng)目中進(jìn)行本地化的方式,本文為大家介紹了一種常見的做法,希望對(duì)大家有所幫助2024-03-03
vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開發(fā)后臺(tái)管理系統(tǒng)時(shí),?般都會(huì)涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue+element開發(fā)使用el-select不能回顯的處理方案
這篇文章主要介紹了vue+element開發(fā)使用el-select不能回顯的處理方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07