一、背景
我們平時(shí)做系統(tǒng)為了保證用戶操作數(shù)據(jù)的安全性字逗，很多時(shí)候當(dāng)用戶長(zhǎng)時(shí)間不再操作電腦的時(shí)候京郑，應(yīng)該給用戶自動(dòng)退出系統(tǒng)，這樣可以防止有別人使用電腦操作上一個(gè)用戶的數(shù)據(jù)葫掉。
二些举、設(shè)計(jì)想法
- 監(jiān)聽(tīng)鼠標(biāo)移動(dòng)以及鍵盤(pán)操作。
- 設(shè)置timer俭厚，timer到達(dá)指定值后進(jìn)行跳轉(zhuǎn)并提示户魏。
- 開(kāi)啟timer并且關(guān)閉timer
三、代碼實(shí)現(xiàn)
設(shè)定一個(gè)計(jì)數(shù)值挪挤，利用js原生的事件叼丑，對(duì)鼠標(biāo)，鍵盤(pán)進(jìn)行監(jiān)聽(tīng)扛门，如果一有觸發(fā)的鼠標(biāo)鸠信，鍵盤(pán)的話，就將計(jì)數(shù)值清零论寨，否則星立，計(jì)數(shù)值一直累加，當(dāng)累加到一個(gè)目標(biāo)值政基，即那個(gè)無(wú)操作退出系統(tǒng)的時(shí)間就可以觸發(fā)退出系統(tǒng)函數(shù)贞铣。
完整的代碼：
data () {
return {
count: 0
}
},
mounted () {
// 監(jiān)聽(tīng)鼠標(biāo)
document.onmousemove = (event) => {
let x1 = event.clientX
let y1 = event.clientY
if (this.x !== x1 || this.y !== y1) {
this.count = 0
}
this.x = x1
this.y = y1
}
// 監(jiān)聽(tīng)鍵盤(pán)
document.onkeydown = () => {
this.count = 0
}
// 監(jiān)聽(tīng)Scroll
document.onscroll = () => {
this.count = 0
}
this.setTimer()
},
// 最后在beforeDestroy()生命周期內(nèi)清除定時(shí)器：
beforeDestroy () {
this.clearTimer()
},
methods: {
clearTimer () {
clearInterval(window.myTimer)
window.myTimer = null
},
setTimer () {
this.count = 0
if (!window.myTimer) {
window.myTimer = window.setInterval(this.cookieTimeout, 1000)
}
},
cookieTimeout () {
// 判斷用戶5分鐘無(wú)操作就自動(dòng)登出
let outTime = 5
this.count++
if (this.count === outTime * 60) {
this.$message({
message: '系統(tǒng)已經(jīng)五分鐘無(wú)操作，將在十秒后退出登錄沮明，如不想退出系統(tǒng)辕坝，請(qǐng)任意操作鼠標(biāo)鍵盤(pán)...',
type: 'error'
})
setTimeout(this.logout, 10000)
// console.log('aaaa', this.count)
}
},
logout () {
// console.log('bbb', this.count)
if (this.count >= 5 * 60) {
sessionStorage.setItem('loginname', '')
this.$router.replace({name: 'Login'})
}
},
}
功能實(shí)現(xiàn)還是相對(duì)簡(jiǎn)單的，僅僅作為記錄一下荐健。
