The company needs to do some security treatment in order to cooperate with the equal protection

For example, if a user does not perform any operation after entering the system, the user forcibly logs out of the system

At the beginning, my colleague wrote one, the idea is:

Execute a setInterval every 3 seconds when accessing the system login page to check if there is no operating system beyond the time we set, and to determine if the mouse left the outermost div with a mouseover

The implementation code

/ / App. Vue web page

  // 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() // Update the current time
      this.lastTime = localStorage.getItem('lastTime')
      if (this.currentTime - this.lastTime > this.timeOut) {
        // Determine whether timeout occurs
        if (this.$route.path ! = ='/login') {
          // console.log(' timed out ')
          this.$store.dispatch('user/logout')
          this.$router.push(`/login? redirect=The ${this.$route.fullPath}`)}}}}Copy the code

There are several problems with this idea:

  • 1. This code is written on the outermost APP page of VUE project, that is, the timer has been executed before login; The login page definitely does not need to log out of the system
  • 2. The timer is not released. SetInterval consumes performance
  • 3. The local time is compared, and the local machine time can be changed at any time

So with these questions, let’s do some optimization

  • For the first question, there is more than one global page in app. It is better to put it on the global page after login to monitor events. Our project has layout, so it is appropriate to transplant the monitoring to layout.
  • For the second problem, use setTimeout instead of setInterval for better performance
  • Optimization point for the third problem: do not compare the time, we only need to do too much time to exit the system operation

Final implementation code

<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)
    }
  }
Copy the code

As you can see, I’m using mouseover to listen to whether the user has an operating system or not, because this event will bubble up to all the superior elements and reset the timer every time the mouse continues to move over our interface

❤️ watch two little things

If you find this article inspiring, I’d like you to do me two small favors:

Share this article with your friends/communication group, let more people see it, progress together, grow together!

Pay attention to the public number “cartoon programmers”, the public number background reply “resources” for free I carefully organized the front-end advanced resources tutorial

www.javascriptC.com is a platform dedicated to helping developers change the world with code. You can find the top content in the technology world here every day