<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
timer: null, // 用于存储计时器的变量
};
},
mounted() {
this.clearTimer();
this.startTimer(); // 组件挂载后启动计时器
},
beforeDestroy() {
this.clearTimer(); // 组件销毁前清除计时器
},
methods: {
startTimer() {
// console.log("用户操作,开始计时");
this.timer = setTimeout(() => {
this.logout(); // 计时器结束后执行退出操作
}, 120 * 60 * 1000); // 半小时,单位为毫秒 30 * 60 * 1000
},
clearTimer() {
if (this.timer) {
clearTimeout(this.timer); // 清除计时器
this.timer = null;
}
},
resetTimer() {
this.clearTimer(); // 重置计时器前先清除
this.startTimer(); // 重新开始计时
},
async logout() {
await this.$store.dispatch("user/logout"); //退出自己清除token等
this.$router.push(`/login?redirect=${this.$route.fullPath}`);
},
// 监听用户活动,如点击事件
handleClick() {
this.resetTimer();
},
// 监听键盘输入事件
handleKeyDown() {
this.resetTimer();
},
},
// 可以监听整个document的点击或键盘事件来重置计时器
mounted() {
document.addEventListener("click", this.handleClick);
},
beforeDestroy() {
document.removeEventListener("click", this.handleClick);
},
};
</script>
11-28
02-24
2949
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
12-03
4万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-06
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交