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

Posted 2021-09-06 Mark

公司为了配合等保，需要做一些安全性处理

例如：如果登录用户在进入系统后，一直没有操作的情况下，一段时间后强制登出系统

刚开始同事写了一个，思路是：

在访问系统登录页面的时候执行一个setInterval，每隔3秒钟去检查一遍是否超出我们设定的时间没有操作系统了，而且判定这个是拿mouseover来监听的鼠标是否离开最外层div

实现代码

//App.vue页面

  // html
  <div id="app" @mouseover="cmouseovered">
    <router-view />
  </div>
  
  // 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，性能更好
• 针对第三个问题优化点：不去对比时间，我们只要做到再过多长时间执行退出系统操作即可

最后实现代码

<div class="app-wrapper" @mouseover="cmouseovered"></div>

// 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来监听用户还有没有操作系统，因为这个事件会冒泡到所有的上级元素，只要鼠标还有移动在我们的界面上，就每次都会重置定时器

❤️ 看完两件小事

如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：

把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！

关注公众号 「画漫画的程序员」，公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网 - 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容