js實現自動鎖屏功能
1.使用場景
有這麼一個需求,開發瞭一套系統,當用戶離開桌面或者一段時間不操作的話,需要把該系統所有打開頁面鎖定起來,就跟桌面鎖屏一樣,隻能輸入密碼驗證成功後,或者重新登錄,才可以繼續操作頁面,如果刷新頁面,也要保持鎖定。就像下圖一樣。當然用戶也可以手動觸發鎖屏。目的是防止他人隨意操作系統的重要內容。那麼該如何去實現呢?
5s鎖屏效果如下:
2.思路
- 首先需要一個變量isLock表示頁面是否鎖定。由於多個頁面需要共享這個數據,且刷新後依然能夠獲取到,所以我使用瞭localStorage儲存在本地。isLock為true的時候就展示鎖屏樣式。
- 設置一個定時器 setTimeout,比如代碼中設置頁面無操作n秒後鎖屏,那麼n秒後執行鎖屏操作lockPro(),即var timer = setTimeout(lockPro, n)
- 需要監測window的mousemove事件,監測用戶鼠標移動動作,判斷屏幕有沒有被鎖定,如果已經鎖定,則不做任何操作,如果屏幕還沒有鎖定,需要設置一個變量moveTime記錄每次鼠標移動時的時間,並保存到localStorage中,並且清除定時器timer,重新計時。
- setInterval輪詢監聽isLock,每1s獲取一次,以便及時拿到鎖屏狀態。
- 鎖屏操作lockPro,判斷當前時間與上次鼠標操作的時間即moveTime的差值,如果小於n秒,則認為不需要鎖屏,如果大於等於n秒,則需要鎖屏,並更新鎖屏狀態isLock
- 判斷狀態為鎖定後,清除定時器timer,結束定時任務。
- 判斷狀態為未鎖定後,重置定時器,即先清除timer,再設置一個timer
- 退出登錄時,清除本地緩存isLock。
- 密碼解鎖時,清除本地緩存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!
推薦閱讀:
- localStorage過期時間設置的幾種方法
- JS防抖節流函數的實現與使用場景
- JS代碼計算LocalStorage容量示例詳解
- Vue項目如何保持用戶登錄狀態(localStorage+vuex刷新頁面後狀態依然保持)
- 如何用redis setNX命令來加鎖