核心逻辑:记录当前时间,更新每次操作时的时间,计算:当前时间- 最后操作时间 > 限定时间,如果大于就是长时间未操作
这个js方法会在页面加载成功后就执行,故需要一开始就加载定时器,而后每次触发事件后清除原来的定时器并重新开始
1、在utils目录下创建timer.js
// 用户长时间未操作 退出登录
import store from '@/store'
import router from '@/router'
var timer = null
clearInterval(timer)
export function isOperateFun() {
var lastTime = new Date().getTime() // 最后一次点击时间
var currentTime = new Date().getTime() // 当前时间
var timeOut = 60 * 60 * 1000 // 允许最长未操作时间(毫秒)
function handleReset() { // 重新赋值最后一次点击时间,清除定时器,重新开始定时器
lastTime = new Date().getTime()
if (timer) {
clearInterval(timer)
timer = null
}
if (!timer) {
// console.log('真好!重新开始')
handleInterval()
}
}
document.onclick = () => { // 单击事件
handleReset()
}
function handleInterval() { // 定时器
timer = setInterval(() => {
currentTime = new Date().getTime() // 当前时间
if (currentTime - lastTime > timeOut) {
console.log('长时间未操作')
clearInterval(timer) // 清除定时器
store.dispatch('user/logout').then(() => { // 执行退出
router.push('/login')
})
}
}, 30000) // 执行间隔时间
}
handleInterval() // 一开始程序 默认执行定时器
}
2、在app.vue中调用js方法
import { isOperateFun } from '@/utils/timer.js'
export default {
name: 'App',
created() {
isOperateFun()
}
}