关于一段时间不操作自动退出系统
关于一段时间不操作自动退出系统我写了一个，思路是：在访问系统登录页面时执行一个setInterval，每3秒检查是否有超过我们设置时间的操作系统，判断用mouseover监听鼠标是否离开最外层div实现代码//App.vue页面//html
//jsmounted(){this.tiemer=window.setInterval(this.checkTimeout,3000)},方法:{cmouseovered(){localStorage.setItem('lastTime',newDate().getTime())},checkTimeout(){this.currentTime=newDate().getTime()//更新当前时间this.lastTime=localStorage.getItem('lastTime')if(this.currentTime-this.lastTime>this.timeOut){//判断是否定时outif(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。最好放在登录后的全局页面，以监听事件。我们的项目是有布局的，所以把监控移植到布局上比较合适；对于第二个问题，使用setTimeout代替setInterval以获得更好的性能优化第三个问题：不用比较时间，我们只需要长时间执行退出系统操作，最终实现代码
//jsmounted(){this.countTime()},方法：{countTime(){constvm=thisthis.timer=setTimeout(function(){vm.logout()},this.timeOut)},cmouseovered(){clearTimeout(this.timer)this.countTime()},asynclogout(){awaitthis.$store.dispatch('user/logout')this.$router.push('/login')clearInterval(this.tiemer)}}这个实现解决了以上三个主要问题。可以看到，我用mouseover来监听用户是否有操作系统，因为这个事件会冒泡到所有上级Element，只要鼠标还在我们的界面上移动，每次都会重置定时器??看完两个小东西，如果你觉得这篇文章对你很有启发，还请你帮我两个小忙：把这篇文章分享到你的朋友/交流群，让更多人看到，共同进步，以及一起成长！关注“画漫画的程序员”，公众号后台回复“资源”免费领取我精心整理的前端进阶资源教程从科技界找头条内容
