vue實現用戶長時間不操做，自動退出登陸

1、需求說明

昨天后端開發人員讓我實現一個網頁鎖屏，當時我一頭霧水，問他爲啥搞的跟安卓系統同樣。他的回覆是"看起來帥點"。

首先咱們梳理下邏輯，先來個簡化版的，用戶長時間未操做時，返回登陸頁

2、思路

使用 mouseover 事件來監測是否有用戶操做頁面，寫一個定時器間隔特定時間檢測是否長時間未操做頁面，若是是，退出登錄，清除token，返回登陸頁

3、實現

【1】在util文件夾下建立一個storage.js封裝localStorage方法

export default {
  setItem(key, value) {
    value = JSON.stringify(value);
    window.localStorage.setItem(key, value)
  },
  getItem(key, defaultValue) {
    let value = window.localStorage.getItem(key)
    try {
      value = JSON.parse(value);
    } catch {}
    return value || defaultValue
  },
  removeItem(key) {
    window.localStorage.removeItem(key)
  },
  clear() {
    window.localStorage.clear()
  },
}複製代碼

【2】在util文件夾下建立一個astrict.js

每隔30s去檢查一下用戶是否過了30分鐘未操做頁面

// 引入路由和storage工具函數
import storage from '@/utils/storage'
import router from "@/common/router"

let lastTime = new Date().getTime()
let currentTime = new Date().getTime()
let timeOut = 30 * 60 * 1000  //設置超時時間: 30分鐘

window.onload = function () {
  window.document.onmousedown = function () {
    stroage.setItem("lastTime", new Date().getTime())
  }
};

function checkTimeout() {
  currentTime = new Date().getTime()		//更新當前時間
  lastTime = stroage.getItem("lastTime");

  if (currentTime - lastTime > timeOut) { //判斷是否超時

    // 清除storage的數據(登錄信息和token)
    storage.clear()
    // 跳到登錄頁
    if(router.currentRouter.name == 'login') return // 當前已是登錄頁時不作跳轉
    router.push({ name: 'login' })
  }
}

export default function () {
  /* 定時器 間隔30秒檢測是否長時間未操做頁面 */
  window.setInterval(checkTimeout, 30000);
}
複製代碼

【2】在main.js引入astrict.js

import Astrict from '@/utils/astrict'
Vue.use(Astrict)複製代碼

4、鎖屏

實現網頁鎖屏的思路和上面自動退出登陸相似，稍微改動實現以下：

【1】用戶長時間未操做，彈出設置鎖屏密碼彈框設置鎖屏密碼

【2】密碼(password)和鎖屏狀態(isLock)存入localStorage 和vuex

【3】設置成功後跳轉到鎖屏登陸頁

【4】 在路由裏面判斷vuex裏面的isLock（爲true鎖屏狀態不能讓用戶後退url和自行修改url跳轉頁面不然能夠）

【5】用戶在鎖屏登陸頁輸入剛剛設置的鎖屏密碼，便可解開鎖屏

文章每週持續更新，能夠微信搜索「 前端大集錦 」第一時間閱讀，回覆【視頻】【書籍】領取200G視頻資料和30本PDF書籍資料

​​​