element-ui 避免一个页面弹出多个Message

最新推荐文章于 2023-01-05 15:01:22 发布

十里冰香

最新推荐文章于 2023-01-05 15:01:22 发布

阅读量580

点赞数

分类专栏： Vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/zmttpassion/article/details/117256602

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在Vue应用中遇到403错误时，多个Message提示框会连续弹出，导致用户体验不佳。通过阅读文档，发现可以使用`Message.closeAll()`方法关闭所有消息提示，从而避免弹框重复。在403错误处理代码中加入`Message.closeAll()`，即可确保只显示一个重新登录的提示，并清除用户和组织信息，跳转到登录页面。

摘要由CSDN通过智能技术生成

解决办法: Message.closeAll() 下面的都是废话了....

问题如图: 程序页面拦截接口返回,403的时候会提示重新登录. 问题来了, 这个页面可能会有N个异步调用的接口,有几个,这里就会弹框几次.

代码如下:

 case 403:
        Message( { message: '请重新登录', type: 'error' } )
        utils.removeUserInfoFromCache()
        utils.removeOrganInfoFromCache()
        router.replace( '/login' )
        break

一开始, 我以为它必须要做个单例组件,真的非常头疼.因为我在网上看到的单例需要这样做, 我不会.(白眼)

https://www.cnblogs.com/linqing/p/12192873.html

后来,我发现还是没有仔细读文档, 原来饿了么有考虑这个问题,
问题解决. 代码如下:

      case 403:
        Message.closeAll()
        Message( { message: '请重新登录', type: 'error' } )
        utils.removeUserInfoFromCache()
        utils.removeOrganInfoFromCache()
        router.replace( '/login' )
        break