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

总结

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

相关文章

  • 聊聊vue 中的v-on参数问题

    聊聊vue 中的v-on参数问题

    这篇文章主要介绍了聊聊vue 中的v-on参数问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • Vue3+Ts实现缓存功能的示例代码

    Vue3+Ts实现缓存功能的示例代码

    这篇文章主要为大家详细介绍了Vue3+Ts如何实现缓存,用户搜索词本地排名,延迟消费或者消息队列,用户签到和锁,以及接口限流,还有全局ID等功能,需要的可以参考下
    2024-03-03
  • axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

    axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

    这篇文章主要介绍了axios封装使用拦截器处理接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue前端和Django后端如何查询一定时间段内的数据

    vue前端和Django后端如何查询一定时间段内的数据

    这篇文章主要给大家介绍了关于vue前端和Django后端如何查询一定时间段内的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • vue2.0之多页面的开发的示例

    vue2.0之多页面的开发的示例

    本篇文章主要介绍了vue2.0之多页面的开发的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • ElementUI Upload源码组件上传流程解析

    ElementUI Upload源码组件上传流程解析

    这篇文章主要为大家介绍了ElementUI Upload源码组件上传流程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue3中如何使用异步请求示例详解

    Vue3中如何使用异步请求示例详解

    Vue3增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,下面这篇文章主要给大家介绍了关于Vue3中如何使用异步请求的相关资料,需要的朋友可以参考下
    2022-06-06
  • uni-app获取当前环境信息的方法

    uni-app获取当前环境信息的方法

    uni-aap提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息,这篇文章主要介绍了uni-app获取当前环境信息的相关知识,需要的朋友可以参考下
    2022-11-11
  • vue中如何使用vue-touch插件

    vue中如何使用vue-touch插件

    这篇文章主要介绍了vue中使用vue-touch插件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • nuxt 服务器渲染动态设置 title和seo关键字的操作

    nuxt 服务器渲染动态设置 title和seo关键字的操作

    这篇文章主要介绍了nuxt 服务器渲染动态设置 title和seo关键字的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论