欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue axios 封裝請求攔截多次彈窗的問題及解決

 更新時間:2024年08月30日 14:55:53   作者:Zero0985  
這篇文章主要介紹了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)文章

  • webStorm?debug?vue項目的兩種方案圖文詳解

    webStorm?debug?vue項目的兩種方案圖文詳解

    WebStorm作為一款功能強大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開發(fā)和調(diào)試Vue應(yīng)用,這篇文章主要給大家介紹了關(guān)于webStorm?debug?vue項目的兩種方案,需要的朋友可以參考下
    2024-07-07
  • vant4 封裝日期段選擇器的實現(xiàn)

    vant4 封裝日期段選擇器的實現(xiàn)

    本文主要介紹了vant4 封裝日期段選擇器的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • Vue中如何使用mock模擬數(shù)據(jù)

    Vue中如何使用mock模擬數(shù)據(jù)

    這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù),具有很好的價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標(biāo)

    ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標(biāo)

    這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標(biāo),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • Vue不能觀察到數(shù)組length的變化

    Vue不能觀察到數(shù)組length的變化

    因為vue的響應(yīng)式是通過 Object.defineProperty 來實現(xiàn)的,但是數(shù)組的length屬性是不能添加getter和setter,所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下
    2018-06-06
  • Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南

    Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南

    WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動應(yīng)用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下
    2024-08-08
  • 在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解

    在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解

    在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下
    2024-06-06
  • Vue?axios和vue-axios的關(guān)系及使用區(qū)別

    Vue?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-08
  • vue 全局封裝loading加載教程(全局監(jiān)聽)

    vue 全局封裝loading加載教程(全局監(jiān)聽)

    這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue中Pinia的各種詳細(xì)說明和使用示例

    Vue中Pinia的各種詳細(xì)說明和使用示例

    Pinia是Vue 3的專屬狀態(tài)管理庫,旨在替代Vuex,提供更簡單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項式API,允許跨組件或頁面共享狀態(tài),避免了Vuex中的許多復(fù)雜概念,本文介紹Vue中Pinia的各種詳細(xì)說明和使用示例,感興趣的朋友一起看看吧
    2025-01-01

最新評論