1. 首先在html根元素上加一个点击事件,vue中是在App.vue中添加点击时间
<div id="app" @click="isTime">
<router-view/>
</div>
2.在data中添加三个数据,并记录最后一次点击的时间,当前点击的时间,设置超时时间:30分钟,在页面初始化加载获取最后一次点击的时间。在事件中添加未操作的判断事件,超过30分钟未出现点击事件进行清空本地存储sessionStorage的所有数据,使用编程式导航跳转登录页面,亲测有效。感觉有用的可以留言讨论,给个赞!!!!!
export default {
data(){
return {
lastTime: null, // 最后一次点击的时间
currentTime: null, // 当前点击的时间
timeOut: 30 * 60 * 1000 // 设置超时时间:30分钟
}
},
created () {
this.lastTime = new Date().getTime()
},
methods: {
isTime () {
this.currentTime = new Date().getTime() // 记录这次点击的时间
if (this.currentTime - this.lastTime > this.timeOut) { // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于30分钟
if (sessionStorage.getItem('Authorization')) { // 如果是登录状态
sessionStorage.clear();
this.$router.push({name:'Login'});
} else {
this.lastTime = new Date().getTime()
}
} else {
this.lastTime = new Date().getTime() // 如果在30分钟内点击,则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
}
}
}
}