关于一段时间不操作自动退出系统关于一段时间不操作自动退出

公司为了配合等保，需要做一些安全性处理
例如：如果登录用户在进入系统后，一直没有操作的情况下，一段时间后强制登出系统
刚开始同事写了一个，思路是：
在访问系统登录页面的时候执行一个setInterval，每隔3秒钟去检查一遍是否超出我们设定的时间没有操作系统了，而且判定这个是拿mouseover来监听的鼠标是否离开最外层div
实现代码

//App.vue页面// html// js mounted() { this.tiemer = window.setInterval(this.checkTimeout, 3000) },methods: { cmouseovered() { localStorage.setItem('lastTime', new Date().getTime()) }, checkTimeout() { this.currentTime = new Date().getTime() // 更新当前时间 this.lastTime = localStorage.getItem('lastTime') if (this.currentTime - this.lastTime > this.timeOut) { // 判断是否超时 if (this.$route.path !== '/login') { // console.log('超时了') this.$store.dispatch('user/logout') this.$router.push(`/login?redirect=${this.$route.fullPath}`) } } } }

这个思路，可以很明显看到几个问题：

1.这个代码是写在VUE项目最外层 app页面，也就是还没登录的时候定时器已经在执行了；登录页肯定是不需要再退出系统了
2.定时器没有释放，setInterval是比较消耗性能的
3.比对的是本地时间，本地机器时间是可以随时修改的

结合这几个问题，我们来做一下优化

针对第一个问题，全局页面不止app一个，最好是放在登录以后的全局页面去监听事件，我们项目有layout，所以把监听移植到layout比较合适；
针对第二个问题，使用setTimeout代替setInterval，性能更好
针对第三个问题优化点：不去对比时间，我们只要做到再过多长时间执行退出系统操作即可

最后实现代码

// js mounted() { this.countTime() }, methods: { countTime() { const vm = this this.timer = setTimeout(function() { vm.logout() }, this.timeOut) }, cmouseovered() { clearTimeout(this.timer) this.countTime() }, async logout() { await this.$store.dispatch('user/logout') this.$router.push('/login') clearInterval(this.tiemer) } }

这个实现就解决了上面3大问题，大家看到了，我用的是mouseover来监听用户还有没有操作系统，因为这个事件会冒泡到所有的上级元素，只要鼠标还有移动在我们的界面上，就每次都会重置定时器
?? 看完两件小事 【关于一段时间不操作自动退出系统】如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：
把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！
关注公众号「画漫画的程序员」，公众号后台回复「资源」免费领取我精心整理的前端进阶资源教程