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

5次阅读

共计 1633 个字符，预计需要花费 5 分钟才能阅读完成。

公司为了配合等保，须要做一些安全性解决

例如：如果登录用户在进入零碎后，始终没有操作的状况下，一段时间后强制登出零碎

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

在拜访零碎登录页面的时候执行一个 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 来监听用户还有没有操作系统，因为这个事件会冒泡到所有的下级元素，只有鼠标还有挪动在咱们的界面上，就每次都会重置定时器

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

把这篇文章分享给你的敌人 / 交换群，让更多的人看到，一起提高，一起成长！

关注公众号「画漫画的程序员 」，公众号后盾回复「 资源」收费支付我精心整顿的前端进阶资源教程