溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vue實現用戶長時間不操作自動退出登錄功能的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
一、需求說明
昨天后端開發人員讓我實現一個網頁鎖屏，當時我一頭霧水，問他為啥搞的跟安卓系統一樣。他的回復是"看起來帥點"。
首先我們梳理下邏輯，先來個簡化版的，用戶長時間未操作時，返回登錄頁
二、思路
使用 mouseover 事件來監測是否有用戶操作頁面，寫一個定時器間隔特定時間檢測是否長時間未操作頁面，如果是，退出登陸，清除token，返回登錄頁
三、實現
【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)
四、鎖屏
實現網頁鎖屏的思路和上面自動退出登錄類似，稍微改動實現如下：
【1】用戶長時間未操作，彈出設置鎖屏密碼彈框設置鎖屏密碼
【2】密碼(password)和鎖屏狀態(isLock)存入localStorage 和vuex
【3】設置成功后跳轉到鎖屏登錄頁
【4】 在路由里面判斷vuex里面的isLock（為true鎖屏狀態不能讓用戶后退url和自行修改url跳轉頁面否則可以）
【5】用戶在鎖屏登錄頁輸入剛剛設置的鎖屏密碼，即可解開鎖屏
看完上述內容，是不是對vue實現用戶長時間不操作自動退出登錄功能的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
