vue axios 封裝請求攔截多次彈窗的問題及解決
問題
token過期或者失效后,彈窗提示用戶登陸失效,重新登陸。
在一些頁面中初始化時調(diào)了多個API,會出現(xiàn)多次彈出重新登陸的彈框
解決方案
1、使用axios中的CancelToken,在判斷登陸失敗時,取消后面的API請求。
2、跳轉(zhuǎn)路由,取消上一個頁面未請求成功的API。
實現(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,請求進(jìn)來存入 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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標(biāo),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動應(yīng)用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下2024-08-08在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下2024-06-06Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫,可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios, axios),本文給大家介紹Vue?axios和vue-axios關(guān)系,感興趣的朋友一起看看吧2022-08-08vue 全局封裝loading加載教程(全局監(jiān)聽)
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11