js to realize automatic lock screen function

1. Usage scenarios

There is such a requirement, so a system was developed. When the user leaves the desktop or does not operate for a period of time, all open pages of the system need to be locked, just like the desktop lock screen. Only after successfully entering the password for verification or logging in again can the page be continued to be operated. If the page is refreshed, it must remain locked. Just like the picture below. Of course, users can also trigger the lock screen manually. The purpose is to prevent others from arbitrarily accessing important content of the system. So how do we achieve this?

The 5s lock screen effect is as follows:

2. Ideas

1. First, a variable isLock is needed to indicate whether the page is locked. Since multiple pages need to share this data and can still get it after refreshing, I use localStorage to store it locally. When isLock is true, the lock screen style is displayed.
2. Set a timer setTimeout. For example, if the code sets the page to lock the screen after n seconds of inactivity, then execute the lock screen operation lockPro() after n seconds, that is, var timer = setTimeout(lockPro, n)
3. It is necessary to monitor the mousemove event of the window, monitor the user's mouse movement, and determine whether the screen is locked. If it is locked, do not do anything. If the screen is not locked, set a variable moveTime to record the time of each mouse movement, save it in localStorage, clear the timer, and reset the timer.
4. setInterval polls and listens to isLock, obtaining it every 1s to get the lock screen status in time.
5. The lock screen operation lockPro determines the difference between the current time and the time of the last mouse operation, i.e. moveTime. If it is less than n seconds, it is considered that the screen does not need to be locked. If it is greater than or equal to n seconds, the screen needs to be locked and the lock screen status isLock is updated.
6. After determining that the state is locked, clear the timer and end the timing task.
7. After determining that the state is unlocked, reset the timer, that is, clear the timer first, and then set a timer
8. When you log out, clear the local cache isLock.
9. When the password is unlocked, clear the local cache isLock, reset moveTime, and reset the timer.

It's a bit confusing and needs to be sorted out.

3. Code Implementation

The following code is incomplete, the HTML structure is omitted, and you can use it freely.

// app.vue

data () {
  return {
    timeOut: 5000,
    timer: null,
    isLock: 'false'
  }
},
mounted () {
  this.timer = setTimeout(this.lockPro, this.timeOut)
  // Set the operation time for the first time localStorage.setItem('moveTime', Date.now())
  //First judgement status this.modalStatus()
  // Poll monitoring status setInterval(this.modalStatus, 1000)
  // Listen for mouse events this.events()
},
methods:{
   events() {
      window.onmousemove = () => {
        // console.log('The mouse has moved')
        if (!this.isLock) {
          localStorage.setItem('moveTime', Date.now())
          this.clearLocaPro('continue')
        }
      }
    },
    modalStatus() {
      if (localStorage.getItem('isLock') === 'true') {
        // console.log('Screen locked')
        this.isLock = true
        this.clearLocaPro()
      } else {
        // console.log('The screen is not currently locked')
        this.isLock = false
        this.clearLocaPro('continue')
      }
    },
    lockPro() {
      if (!this.timeOut) {
        localStorage.setItem('isLock', 'false')
        this.clearLocaPro('continue')
        return
      }
      if (Date.now() - localStorage.getItem('moveTime') < this.timeOut) {
        localStorage.setItem('isLock', 'false')
        this.clearLocaPro('continue')
      } else {
        localStorage.setItem('isLock', 'true')
        this.clearLocaPro()
      }
    },
    clearLocaPro(status) {
      if(this.timer){
         clearTimeout(this.timer)
      }
      if (status === 'continue') {
        this.timer = setTimeout(this.lockPro, this.timeOut)
      }
    },
    // Manual lock handleLock(){
      this.clearLocaPro()
      localStorage.setItem('isLock', 'true')
    },
    // Password unlock unlock(){
      localStorage.removeItem('isLock')
      localStorage.setItem('moveTime', Date.now())
      this.clearLocaPro('continue')
    },
    ...
    // Don't forget to clear isLock when logging out
}

This is the end of this article about how to implement automatic screen lock using js. For more information about automatic screen lock using js, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!