一般前端是否退出到登錄都是根據(jù)接口返回是否為401拱烁，即token失效噩翠。
但是現(xiàn)在有一個(gè)需求是用戶三十分鐘未操作頁(yè)面就退出到登錄，此時(shí)token并未失效擅笔，因?yàn)榻缑嬷杏泻芏嗟妮喸儯跊]有操作頁(yè)面的情況下念脯，接口仍在訪問(wèn)弯淘，導(dǎo)致token續(xù)期，所以此時(shí)通過(guò)判斷是否401狀態(tài)就不可行了假勿。
那么态鳖，前端如何判斷用戶是否在三十分鐘內(nèi)均未操作界面呢？
這就需要用到mousemove和mousewheel事件了浆竭。
mousemove：鼠標(biāo)移動(dòng)事件
mousewheel:鼠標(biāo)滾動(dòng)事件
通過(guò)監(jiān)聽這兩種事件即可判斷用戶是否有操作頁(yè)面
App.vue
<template>
<el-config-provider :locale="locale">
<router-view />
</el-config-provider>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useConfigStore } from '@/stores/config'
import { computed, onUnmounted } from 'vue'
const store = useConfigStore()
const locale = computed(() => {
if (store.lang === 'en') return en
else {
return zhCn
}
})
store.timeOutValue = 30 * 60 * 1000
const handleEvent = () => {
// 判斷是否超過(guò)30分鐘未操作界面
store.changeLastTime()
}
// 創(chuàng)建定時(shí)器兆蕉，主動(dòng)判斷
const timer = setInterval(() => {
store.isTimeOut()
}, 5000)
const body = document.querySelector('html')
// 鼠標(biāo)移動(dòng)
body?.addEventListener('mousemove', handleEvent)
// 鼠標(biāo)滾動(dòng)事件
body?.addEventListener('mousewheel', handleEvent)
onUnmounted(() => {
body?.removeEventListener('mousemove', handleEvent)
body?.removeEventListener('mousewheel', handleEvent)
clearInterval(timer)
})
</script>
stores/config
import { colorHextoRGB } from '@/utils/util'
import { defineStore } from 'pinia'
import router from '@/router'
export const useConfigStore = defineStore('config', {
state: () => {
return {
lastTime: 0, // 上一次點(diǎn)擊的時(shí)間
timeOutValue: 30 * 60 * 1000 // 設(shè)置超時(shí)時(shí)間:30分鐘 30 * 60 * 1000
}
},
getters: {},
actions: {
changeLastTime () {
this.lastTime = new Date().getTime()
},
// 判斷是否大于30分鐘
isTimeOut () {
const currentTime = new Date().getTime() // 記錄當(dāng)前時(shí)間
if (currentTime - this.lastTime > this.timeOutValue) { // 上次最后一次點(diǎn)擊的時(shí)間和當(dāng)前時(shí)間間隔大于30分鐘（指定的時(shí)間）
if (JSON.parse(localStorage.getItem('user') ?? '{}')?.userInfo?.token) { // 如果是登錄狀態(tài)
ElMessage.error('長(zhǎng)時(shí)間未操作頁(yè)面虎韵，請(qǐng)重新登錄')
setTimeout(() => {
router.push('/login')
}, 3000)
}
}
}
},
persist: true
})
