一般前端是否退出到登录都是根据接口返回是否为401，即token失效。
但是现在有一个需求是用户三十分钟未操作页面就退出到登录，此时token并未失效，因为界面中有很多的轮询，在没有操作页面的情况下，接口仍在访问，导致token续期，所以此时通过判断是否401状态就不可行了。
那么，前端如何判断用户是否在三十分钟内均未操作界面呢？
这就需要用到mousemove和mousewheel事件了。
mousemove：鼠标移动事件
mousewheel:鼠标滚动事件
通过监听这两种事件即可判断用户是否有操作页面
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 = () => {
// 判断是否超过30分钟未操作界面
store.changeLastTime()
}
// 创建定时器，主动判断
const timer = setInterval(() => {
store.isTimeOut()
}, 5000)
const body = document.querySelector('html')
// 鼠标移动
body?.addEventListener('mousemove', handleEvent)
// 鼠标滚动事件
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, // 上一次点击的时间
timeOutValue: 30 * 60 * 1000 // 设置超时时间:30分钟 30 * 60 * 1000
}
},
getters: {},
actions: {
changeLastTime () {
this.lastTime = new Date().getTime()
},
// 判断是否大于30分钟
isTimeOut () {
const currentTime = new Date().getTime() // 记录当前时间
if (currentTime - this.lastTime > this.timeOutValue) { // 上次最后一次点击的时间和当前时间间隔大于30分钟（指定的时间）
if (JSON.parse(localStorage.getItem('user') ?? '{}')?.userInfo?.token) { // 如果是登录状态
ElMessage.error('长时间未操作页面，请重新登录')
setTimeout(() => {
router.push('/login')
}, 3000)
}
}
}
},
persist: true
})
