VUE单页面应用 登陆过期控制

问题背景

最近做的内部管理系统中有一个bug为登陆过期的时候点击页面出现多次登陆过期请重新登录。

找原因

页面加载调用多个接口，（登陆过期，请重新登陆）这个信息是后端返回的,直接上代码

在axios上封装了一封promise,登陆过期的状态码为300，是我最下面标注的一个圆圈。

解决办法

初次想法

当登陆过期的时候直接跳转到登陆页面，不把错误信息给alert出来，这个方法直接被老大给否决了，这样只能解决表面问题，并不能解决根本。然后想以前做的项目，以前的前后端不分离的有page_load,mvc有路由跳转，这个单页面应用路由的话用路由守卫可以做到，单页面应用这个怎么做呢，继续想解决办法

第二个想法

不用alert，自己封装一个弹框，设置一个callback函数，当点击确定的时候，跳转到登陆页面，这个是可行的。

编写登陆弹框

1. 先看页面
   
   关键的几个点我都用红线标注出来了

2. 看js部分的内容
   
   这里关键的部分是把alert绑定在vue的属性上，然后调用的时候直接用$alert绑定在vue的属性上，然后调用的时候直接用$alert,然后编写options函数，看传入参数是否有isOK,然后当点击确定时把路由跳转到login页面

3. 修改baseservice

   
   ok,到这里的话登陆过期仍然会弹出多个，这个时候我是这样处理的，
   是用js的如果页面上又内容的话不创建div,这个时候基本上已经实现功能了。

   最终解决

   组长看了后说，不行你这个是jquery的思想，还不够vue，最终是通过一个变量来实现的，上代码和最终效果图