elementUI 一次诡异的 MessageBox 弹框事件

做项目的时候使用 MessageBox 来提示用户 “异地登录” 以及 “token 过期”,直到用户点击了弹框中的“重新登录”按钮,就将用户引导至登录页面。

现在项目中有一个轮询的接口,每15s调用一次,目的是刷取最新的任务信息。正当我有事暂时离开的时候如果 token过期或者账号被挤出来(测试账号是公用的)后用户没有及时点击登录按钮的话,这个弹框就会一直生成,之前没有被关掉的弹框就被覆盖掉了。这个情况大概持续了2min,那么计算一下大概产生了8个没有被及时处理而被覆盖的 MessageBox 弹框。这时候我回来继续处理问题,我发现了界面上的提示,然后我点击“重新登录”,紧接着我导航到产品页面执行新增产品的操作,输入必要信息,ok,一切正常,紧接着点击提交 - 好吧,本着为客户着想的原则,我们在项目中几乎所有涉及新增记录的位置加上了确认框,也包括这里 - 那么如无意外,此时应该弹出一个 MessageBox,询问我“确认提交吗?” 好的,我点击它...纳尼?!居然告诉我 token过期,请重新登录?我才刚刚登录啊,而且这会应该没有人在跟我抢账号才对。吓得我赶紧打开debug,一看不得了,我点击提交的时候压根没有调任何接口,这何其诡异啊。

后来我耗费大量时间做调试,才发现还是因为之前弹出的又没被及时处理的而且被之后弹出的 MessageBox 覆盖掉了的  MessageBox,事实上它并不是被简单的覆盖掉了,确切说是被“挂起”更准确一点,因为在时机合适的时候你仍然能够重新处理它,比如本来有其他新的 MessageBox 弹框生成的时候,事实上弹出的就是那个之前没被处理的 MessageBox。

问题找到了,那就解决它。在我的代码里因为是轮询导致的问题,那么在token过期的时候先弹框提示一次,然后取消轮询就可以了

至于其他方法,比如给 MessageBox 添加 :key="new Date()" 属性来标识是否能解决问题,还请自行测试。

猜你喜欢

转载自blog.csdn.net/baobao_123456789/article/details/104746918