js實現自動鎖屏功能

1.使用場景

有這麼一個需求,開發瞭一套系統,當用戶離開桌面或者一段時間不操作的話,需要把該系統所有打開頁面鎖定起來,就跟桌面鎖屏一樣,隻能輸入密碼驗證成功後,或者重新登錄,才可以繼續操作頁面,如果刷新頁面,也要保持鎖定。就像下圖一樣。當然用戶也可以手動觸發鎖屏。目的是防止他人隨意操作系統的重要內容。那麼該如何去實現呢?

5s鎖屏效果如下:

2.思路

  1. 首先需要一個變量isLock表示頁面是否鎖定。由於多個頁面需要共享這個數據,且刷新後依然能夠獲取到,所以我使用瞭localStorage儲存在本地。isLock為true的時候就展示鎖屏樣式。
  2. 設置一個定時器 setTimeout,比如代碼中設置頁面無操作n秒後鎖屏,那麼n秒後執行鎖屏操作lockPro(),即var timer = setTimeout(lockPro, n)
  3. 需要監測window的mousemove事件,監測用戶鼠標移動動作,判斷屏幕有沒有被鎖定,如果已經鎖定,則不做任何操作,如果屏幕還沒有鎖定,需要設置一個變量moveTime記錄每次鼠標移動時的時間,並保存到localStorage中,並且清除定時器timer,重新計時。
  4. setInterval輪詢監聽isLock,每1s獲取一次,以便及時拿到鎖屏狀態。
  5. 鎖屏操作lockPro,判斷當前時間與上次鼠標操作的時間即moveTime的差值,如果小於n秒,則認為不需要鎖屏,如果大於等於n秒,則需要鎖屏,並更新鎖屏狀態isLock
  6. 判斷狀態為鎖定後,清除定時器timer,結束定時任務。
  7. 判斷狀態為未鎖定後,重置定時器,即先清除timer,再設置一個timer
  8. 退出登錄時,清除本地緩存isLock。
  9. 密碼解鎖時,清除本地緩存isLock,重新設置moveTime,重置定時器。

有點繞,需要好好捋一捋。

3.代碼實現

以下代碼是不完全代碼,html結構省略瞭,大傢自由發揮。

// app.vue

data () {
  return {
    timeOut: 5000,
    timer: null,
    isLock: 'false'
  }
},
mounted () {
  this.timer = setTimeout(this.lockPro, this.timeOut)
  // 首次設置操作時間
  localStorage.setItem('moveTime', Date.now())
  // 首次判斷狀態
  this.modalStatus()
  // 輪詢監聽狀態
  setInterval(this.modalStatus, 1000)
  // 監聽鼠標事件
  this.events()
},
methods:{
   events() {
      window.onmousemove = () => {
        // console.log('鼠標移動瞭')
        if (!this.isLock) {
          localStorage.setItem('moveTime', Date.now())
          this.clearLocaPro('continue')
        }
      }
    },
    modalStatus() {
      if (localStorage.getItem('isLock') === 'true') {
        // console.log('鎖屏瞭')
        this.isLock = true
        this.clearLocaPro()
      } else {
        // console.log('當前沒鎖屏')
        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)
      }
    },
    // 手動鎖定
    handleLock(){
      this.clearLocaPro()
      localStorage.setItem('isLock', 'true')
    },
    // 密碼解鎖
    unlock(){
      localStorage.removeItem('isLock')
      localStorage.setItem('moveTime', Date.now())
      this.clearLocaPro('continue')
    },
    ...
    // 別忘瞭退出登錄也要清除isLock
}

到此這篇關於js實現自動鎖屏功能的文章就介紹到這瞭,更多相關js 自動鎖屏 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: