VUE实现用户无操作退出到首页

<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>