data() {
return {
interval: null
}
},
mounted() {
localStorage.setItem('lastTime', new Date().getTime())
this.addOn()
},
beforeDestroy() {
window.clearInterval(this.interval)
},
methods: {
addOn() {
var lastTime = new Date().getTime()
var currentTime = new Date().getTime()
var timeOut = 30 * 60 * 1000; // 设置超时时间: 30分
window.document.onmousedown = function() {
localStorage.setItem('lastTime', new Date().getTime())
}
function checkTimeout() {
currentTime = new Date().getTime() // 更新当前时间
lastTime = localStorage.getItem('lastTime')
if (currentTime - lastTime > timeOut) { // 判断是否超时
var url = window.location.href
var newUrl = url.match(/(\S*)#/)[1]
removeToken()
window.open(newUrl + '#/login', '_self')
}
}
/* 定时器 间隔30秒检测是否长时间未操作页面 */
this.interval = window.setInterval(checkTimeout, 30*1000)
}
}
该页面时Layout布局中的,login页面是不引用的,
思路,在该页面mounted时设置一个时间,增加一个监听事件
每按下鼠标时,更新一次时间
每隔30s判断一次上次按下鼠标据现在时间间隔,如果超过了30分钟,清空定时器
清空token,将其返回到登录页面。
那么beforeDestroy()中是为了人为操作退出登录,然后清空定时器