vue axios 封装请求拦截多次弹窗的问题及解决

 更新时间:2024年08月30日 14:55:53   作者:Zero0985  
这篇文章主要介绍了vue axios 封装请求拦截多次弹窗的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题

token过期或者失效后,弹窗提示用户登陆失效,重新登陆。

在一些页面中初始化时调了多个API,会出现多次弹出重新登陆的弹框

解决方案

1、使用axios中的CancelToken,在判断登陆失败时,取消后面的API请求。

2、跳转路由,取消上一个页面未请求成功的API。

实现方法

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,请求进来存入
                    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');
    }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+ts+vite使用el-table表格渲染记录重复情况

    vue3+ts+vite使用el-table表格渲染记录重复情况

    这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue混入使用和选项合并详解

    Vue混入使用和选项合并详解

    这篇文章主要介绍了Vue混入使用和选项合并,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • Vue中嵌入可浮动的第三方网页窗口的示例详解

    Vue中嵌入可浮动的第三方网页窗口的示例详解

    本文介绍了在Vue2项目中嵌入可浮动的第三方网页窗口的实现方法,包括使用iframe、div+script和dialog元素等方式,并提供了一个实战Demo,展示了如何在Vue组件中动态加载和控制浮窗的显示,需要的朋友可以参考下
    2025-02-02
  • VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法

    VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法

    这篇文章主要介绍了VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue装饰器中的vue-property-decorator 和 vux-class使用详解

    Vue装饰器中的vue-property-decorator 和 vux-class使用详解

    这篇文章主要介绍了Vue装饰器中的vue-property-decorator 和 vux-class使用详解,通过示例代码给大家介绍的非常详细,对vue-property-decorator 和 vux-class的使用感兴趣的朋友一起看看吧
    2022-08-08
  • vue3中setup语法糖下通用的分页插件实例详解

    vue3中setup语法糖下通用的分页插件实例详解

    这篇文章主要介绍了vue3中setup语法糖下通用的分页插件,实例代码介绍了自定义分页插件:PagePlugin.vue,文中提到了vue3中setup语法糖下父子组件之间的通信,需要的朋友可以参考下
    2022-10-10
  • vue项目报错Extra semicolon (semi)问题及解决

    vue项目报错Extra semicolon (semi)问题及解决

    这篇文章主要介绍了vue项目报错Extra semicolon (semi)问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue把输入框的内容添加到页面的实例讲解

    vue把输入框的内容添加到页面的实例讲解

    在本篇文章里小编给大家整理的是关于vue把输入框的内容添加到页面的实例以及相关知识点,需要的朋友们学习下。
    2019-11-11
  • Vue实现JSON字符串格式化编辑器组件功能

    Vue实现JSON字符串格式化编辑器组件功能

    这篇文章主要介绍了Vue实现JSON字符串格式化编辑器组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue.js页面验证跳转功能实现

    Vue.js页面验证跳转功能实现

    这篇文章主要介绍了Vue.js页面验证跳转功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-04-04

最新评论