前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ElementUI MessageBox 防止多次弹框

ElementUI MessageBox 防止多次弹框

作者头像
草帽lufei
发布2022-07-29 09:32:59
2.3K0
发布2022-07-29 09:32:59
举报
文章被收录于专栏:程序语言交流

项目使用 axios 拦截器进行接口响应判断处理,通过判断返回的 code 验证用户 token 是否过期,或者 token 无效, 使用 Element MessageBox 弹框提示。

又因为项目中有个地方需要定时请求服务,获取对应的数据,结果导致在用户在其他设备上登录后(Token无效了),出现定时请求每一次请求拦截器都创建一个 MessageBox 的情况。

解决方式

通过一个变量来标记 MessageBox 状态,如果点击 关闭 , 去登录取消 按钮操作,标记此 MessageBox 已经关闭,否则不创建 MessageBox 询问框。

代码如下

代码语言:javascript
复制
...

let messageBoxFlag = 0 // 默认 MessageBox 未打开
// axios 响应拦截
service.interceptors.response.use(
  async response => {
    const res = response.data
    // 208:未登录,Token过期,Token无效,需要登录
    if (res.code === 208) {
      if (messageBoxFlag === 0) {
        messageBoxFlag = 1 // 修改标记,打开 MessageBox
        MessageBox.confirm('系统检测到您的账号长时间未操作或账号在其他设备登录, 是否重新登录?', '警告', {
          confirmButtonText: '去登录',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          messageBoxFlag = 0  // 修改标记
          window.location = window.location.origin
        }).catch(() => {
          messageBoxFlag = 0  // 修改标记
        })
      }
    } else {
      return res
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

...

Element Message 消息框内置了 close 函数,因此这里不能通过调用 close 的方式解决问题。

参考链接

https://element.eleme.cn/#/zh-CN/component/message-box

https://element.eleme.cn/#/zh-CN/component/message

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-06-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 参谋总长萨博 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方式
  • 代码如下
  • 参考链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档