vue 离开页面时间_vue 用户长时间未操作退出登录

核心逻辑：记录当前时间，更新每次操作时的时间，计算：当前时间- 最后操作时间 > 限定时间，如果大于就是长时间未操作

这个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()

}

}