Vue 网站用户闲置状态自动登出实现

1. 使用了第三方组件记录用户的闲置时间。 https://github.com/soixantecircuits/idle-vue#readme
2. 实现目标，例如，用户设置了15分钟的空闲时间。系统就要在15分钟后弹出对话框提示用户系统要在30秒之后自动退出。
   
3. 实现思路，使用第三方框架判断系统是否在闲置状态。使用localStorage共享每个页面的状态。之后是使用计时器不断的检查localStorage的值，也就是每个界面的状态。
4. 具体实现， create（）中，添加计时器，一直检测localStorage的状态，这里使用了两个localStorage，其中“isIdle“是判断系统的状态，分为四个状态， 第一个：‘active’ 活跃状态，第二个：‘idle’ 闲置状态，第三个：‘logout’ 准备登出状态，第四个： ‘reload’ 用户登出之后，所有页面同时刷新。另外一个’idleDialogVisible’是控制登出对话框的状态。
   
5. 系统在active状态下调用evtActive方法。这里有一个定时器（onActiveTimeIntervalTime)，当页面是active状态的时候，让locaStorage里面的isIdle的值一直为active。其中这里的isAppIdle,是判断当前页面状态的标志。true为闲置状态，false为活跃状态。
   
   6.系统在idle状态下调用evtIdle方法。这里就有一个核心问题。当用户打开多个页面的时候，会出现页面之间状态不用的问题。比如，用户一个界面上操作，其他界面没用操作，这样其他界面就会变成空闲状态，但是此时用户还在操作，是不能弹出登出对话框的。
   解决这个问题的方法就是加一个计时器，在登出对话框弹出之前，检测locaStorage里面的isIdle的值是什么，首先，如果页面是空闲状态，要清空激活状态下的定时器（onActiveTimeIntervalTime)。但此时如果其他页面是激活状态，locaStorage里面的isIdle的值就会被改成active，通过（onActiveTimeIntervalTime)定时器修改。所以这个计时器（onIdleTimeout）是来检测其他界面有没有活跃状态的，如果有，就等着最后一个页面是空闲状态之后，等待登出。
   所以核心思路是，当一个页面变成空闲状态，不能立刻变成准备登出的状态，需要有3秒的时间，检测有没有其他页面是活跃的状态，如果有，就不登出，继续是空闲状态，如果没有，就登出。