vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼
一、需求說明
昨天后端開發(fā)人員讓我實現(xiàn)一個網(wǎng)頁鎖屏，當(dāng)時我一頭霧水，問他為啥搞的跟安卓系統(tǒng)一樣。他的回復(fù)是"看起來帥點"。
首先我們梳理下邏輯，先來個簡化版的，用戶長時間未操作時，返回登錄頁
二、思路
使用 mouseover 事件來監(jiān)測是否有用戶操作頁面，寫一個定時器間隔特定時間檢測是否長時間未操作頁面，如果是，退出登陸，清除token，返回登錄頁
三、實現(xiàn)
【1】在util文件夾下創(chuàng)建一個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文件夾下創(chuàng)建一個astrict.js
每隔30s去檢查一下用戶是否過了30分鐘未操作頁面
// 引入路由和storage工具函數(shù)
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 //設(shè)置超時時間: 30分鐘
window.onload = function () {
window.document.onmousedown = function () {
stroage.setItem("lastTime", new Date().getTime())
}
};
function checkTimeout() {
currentTime = new Date().getTime() //更新當(dāng)前時間
lastTime = stroage.getItem("lastTime");
if (currentTime - lastTime > timeOut) { //判斷是否超時
// 清除storage的數(shù)據(jù)(登陸信息和token)
storage.clear()
// 跳到登陸頁
if(router.currentRouter.name == 'login') return // 當(dāng)前已經(jīng)是登陸頁時不做跳轉(zhuǎn)
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)
四、鎖屏
實現(xiàn)網(wǎng)頁鎖屏的思路和上面自動退出登錄類似，稍微改動實現(xiàn)如下：
【1】用戶長時間未操作，彈出設(shè)置鎖屏密碼彈框設(shè)置鎖屏密碼
【2】密碼(password)和鎖屏狀態(tài)(isLock)存入localStorage 和vuex
【3】設(shè)置成功后跳轉(zhuǎn)到鎖屏登錄頁
【4】 在路由里面判斷vuex里面的isLock（為true鎖屏狀態(tài)不能讓用戶后退url和自行修改url跳轉(zhuǎn)頁面否則可以）
【5】用戶在鎖屏登錄頁輸入剛剛設(shè)置的鎖屏密碼，即可解開鎖屏
總結(jié)
到此這篇關(guān)于vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue 長時間不操作自動退出登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue表單驗證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實現(xiàn)表單元素校驗時，出現(xiàn)下拉框內(nèi)容選中后校驗不消失的異常校驗情形，這篇文章主要介紹了Vue表單驗證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09
Vue?3中引入了組合式函數(shù)編程方式，可以更好地實現(xiàn)代碼的復(fù)用和可維護性。通過定義可組合的函數(shù)，可以將組件的邏輯和狀態(tài)進(jìn)行拆分和組合，實現(xiàn)更靈活的代碼組織方式。同時，組合式函數(shù)也支持響應(yīng)式數(shù)據(jù)和生命周期鉤子函數(shù)，更加貼近Vue開發(fā)的實際場景2023-05-05
這篇文章主要介紹了Vue-Cli項目優(yōu)化操作,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
本文主要介紹了Vue實現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
淺談Vue3.0新版API之composition-api入坑指南
這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue3的Composition API是一個全新的API，它允許開發(fā)人員將Vue組件中的邏輯封裝在單獨的功能性組合中，而不是依賴于Vue選項對象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
vue項目經(jīng)常會用到axios來請求數(shù)據(jù),那么首先肯定需要對這個請求方法進(jìn)行一個二次封裝,這篇文章主要給大家介紹了關(guān)于項目中Axios二次封裝的相關(guān)資料,需要的朋友可以參考下2021-06-06
在Web開發(fā)領(lǐng)域,鼠標(biāo)跟隨效果是一種能顯著提升頁面交互性、增加動態(tài)感與趣味性的常見方式,下面我們看看如何使用Vue3實現(xiàn)鼠標(biāo)跟隨效果吧2024-11-11
這篇文章主要介紹了Vue 2.X的狀態(tài)管理vuex記錄的相關(guān)資料，文中介紹的非常詳細(xì)，對大家的理解和學(xué)習(xí)具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03