<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
data() {
return {
//设置超时时间: 30分种
timeOut : 30 * 60 * 1000,
// timeOut : 30 * 1000,
lastTimeStoreId: 'lastTime_jc'
}
},
methods: {
// 存储当前时间
setLastTime() {
localStorage.setItem(this.lastTimeStoreId,new Date().getTime());
},
// 获取时间
getLastTime() {
return localStorage.getItem(this.lastTimeStoreId);
},
// 删除
removeLastTime() {
localStorage.removeItem(this.lastTimeStoreId)
},
checkTimeout() {
// 登录页面不监听
if(this.timeOut && this.$router.currentRoute.name === 'login') {
this.setLastTime();
}
else {
//更新当前时间
let currentTime = new Date().getTime();
let lastTime = this.getLastTime();
// console.log(currentTime, lastTime, (currentTime - lastTime), this.timeOut);
//判断是否超时
if (currentTime - lastTime > this.timeOut) {
this.$router.push('/');
this.$message({ type: 'warning', message: '界面超过30分钟未操作,需重新登录' })
}
}
},
},
mounted() {
let that = this;
// 每30秒 调用检查时间的方法
this.$nextTick(function () {
setInterval(this.checkTimeout, 30000);
// setInterval(this.checkTimeout, 1000);
})
// 页面监听 按下鼠标更新操作时间
window.onload = function () {
window.document.onmousedown = function () {
that.setLastTime();
}
window.document.onkeydown = function () {
that.setLastTime();
}
};
}
};
</script>
Vue 用户30分钟未操作,页面跳转到登录页
最新推荐文章于 2023-08-11 17:39:17 发布