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');
    }
}

总结

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

相关文章

  • webStorm debug vue项目的两种方案图文详解

    webStorm debug vue项目的两种方案图文详解

    WebStorm作为一款功能强大的IDE,提供了丰富的调试功能和技巧,可以帮助你更高效地开发和调试Vue应用,这篇文章主要给大家介绍了关于webStorm debug vue项目的两种方案,需要的朋友可以参考下
    2024-07-07
  • vant4 封装日期段选择器的实现

    vant4 封装日期段选择器的实现

    本文主要介绍了vant4 封装日期段选择器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • Vue中如何使用mock模拟数据

    Vue中如何使用mock模拟数据

    这篇文章主要介绍了Vue中如何使用mock模拟数据,具有很好的价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • ElementUI Tree 树形控件的使用并给节点添加图标

    ElementUI Tree 树形控件的使用并给节点添加图标

    这篇文章主要介绍了ElementUI Tree 树形控件的使用并给节点添加图标,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue不能观察到数组length的变化

    Vue不能观察到数组length的变化

    因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断。这篇文章主要介绍了为什么Vue不能观察到数组length的变化,需要的朋友可以参考下
    2018-06-06
  • Vue使用wangeditor创建富文本编辑器的完整指南

    Vue使用wangeditor创建富文本编辑器的完整指南

    WangEditor是一个开源的富文本编辑器,由阿里云开发,它提供了一套简洁易用的API和丰富的功能,如拖拽上传图片、插入表格、自定义表情等,适用于网页和移动应用中的内容编辑场景,本文介绍了Vue使用wangeditor创建富文本编辑器的完整指南,需要的朋友可以参考下
    2024-08-08
  • 在Vue3中使用provide和inject进行依赖注入的代码详解

    在Vue3中使用provide和inject进行依赖注入的代码详解

    在现代前端开发中,Vue.js已经成为了非常流行的框架之一,它提供了极大的灵活性和可维护性,今天我们要探讨的是Vue 3中的provide和inject功能,这是一种用于在组件树中进行依赖注入的方法,需要的朋友可以参考下
    2024-06-06
  • Vue axios和vue-axios的关系及使用区别

    Vue axios和vue-axios的关系及使用区别

    axios是基于promise的HTTP库,可以使用在浏览器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包装器,可以像插件一样安装使用:Vue.use(VueAxios, axios),本文给大家介绍Vue axios和vue-axios关系,感兴趣的朋友一起看看吧
    2022-08-08
  • vue 全局封装loading加载教程(全局监听)

    vue 全局封装loading加载教程(全局监听)

    这篇文章主要介绍了vue 全局封装loading加载教程(全局监听),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue中Pinia的各种详细说明和使用示例

    Vue中Pinia的各种详细说明和使用示例

    Pinia是Vue 3的专属状态管理库,旨在替代Vuex,提供更简单、直观的状态管理解决方案,它支持组合式API和选项式API,允许跨组件或页面共享状态,避免了Vuex中的许多复杂概念,本文介绍Vue中Pinia的各种详细说明和使用示例,感兴趣的朋友一起看看吧
    2025-01-01

最新评论