elementUI一次诡异的MessageBox弹框事件

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

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

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

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

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