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

1,296 阅读1分钟

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

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

刚开始同事写了一个,思路是:

在访问系统登录页面的时候执行一个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 一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容