vue axios 封裝請(qǐng)求攔截多次彈窗的問(wèn)題及解決
問(wèn)題
token過(guò)期或者失效后,彈窗提示用戶登陸失效,重新登陸。
在一些頁(yè)面中初始化時(shí)調(diào)了多個(gè)API,會(huì)出現(xiàn)多次彈出重新登陸的彈框
解決方案
1、使用axios中的CancelToken,在判斷登陸失敗時(shí),取消后面的API請(qǐng)求。
2、跳轉(zhuǎn)路由,取消上一個(gè)頁(yè)面未請(qǐng)求成功的API。
實(shí)現(xiàn)方法
const myAxios = {
install(Vue) {
let http = axios.create({
// baseURL: 'http://localhost:8088/hklms/app',
// baseURL: process.env.BASE_API,
timeout:1000,
// transformRequest: [
// function (data){
// return qs.stringify(data, {
// indices: false
// })
// }
// ]
})
http.interceptors.request.use(
config => {
config.cancelToken = new axios.CancelToken((cancel) => {
//使用vuex 定義pushCancel,請(qǐng)求進(jìn)來(lái)存入
store.dispatch('user/pushCancel', {cancelToken:cancel})
});
if (store.state.user.token) {
config.headers['token'] = store.state.user.token
}
return config
},
error => {
console.log(error)
}
)
http.interceptors.response.use(
response => {
const res = response.data;
if(res.code && res.code === 401){
store.dispatch('user/clearCancel');
sessionStorage.clear()
Message.error(res.msg)
router.push("/login")
return Promise.reject(error);
}else {
return response
}
},
error => {
return Promise.reject(error);
}
)
store中 user.js
state: {
axiosCancelArr:[],
}
mutations:{
CLOSE_SIDEBAR: (state) => {
state.opened = !state.opened
if(state.opened){
sessionStorage.setItem('sidebarStatus',1)
}else {
sessionStorage.setItem('sidebarStatus',0)
}
},
PUSH_CANCEL(state, cancel){
state.axiosCancelArr.push(cancel.cancelToken);
},
CLEAR_CANCEL(state){
state.axiosCancelArr.forEach(e=>{
e && e()
});
state.axiosCancelArr = []
}
},
actions: {
pushCancel({commit}, cancel){
commit('PUSH_CANCEL', cancel)
},
clearCancel({commit}){
commit('CLEAR_CANCEL');
}
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
webStorm?debug?vue項(xiàng)目的兩種方案圖文詳解
WebStorm作為一款功能強(qiáng)大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開(kāi)發(fā)和調(diào)試Vue應(yīng)用,這篇文章主要給大家介紹了關(guān)于webStorm?debug?vue項(xiàng)目的兩種方案,需要的朋友可以參考下2024-07-07
ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個(gè)開(kāi)源的富文本編輯器,由阿里云開(kāi)發(fā),它提供了一套簡(jiǎn)潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁(yè)和移動(dòng)應(yīng)用中的內(nèi)容編輯場(chǎng)景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下2024-08-08
在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下2024-06-06
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫(kù),可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios, axios),本文給大家介紹Vue?axios和vue-axios關(guān)系,感興趣的朋友一起看看吧2022-08-08
vue 全局封裝loading加載教程(全局監(jiān)聽(tīng))
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽(tīng)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue中Pinia的各種詳細(xì)說(shuō)明和使用示例
Pinia是Vue 3的專屬狀態(tài)管理庫(kù),旨在替代Vuex,提供更簡(jiǎn)單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項(xiàng)式API,允許跨組件或頁(yè)面共享狀態(tài),避免了Vuex中的許多復(fù)雜概念,本文介紹Vue中Pinia的各種詳細(xì)說(shuō)明和使用示例,感興趣的朋友一起看看吧2025-01-01

