vue增加长时间无操作退出登录功能

目录

1. 监控用户操作

2. 设置计时器

3. 实现退出登录逻辑

4.代码逻辑

5.关键点

---

1. 监控用户操作

你需要监听用户的操作（例如鼠标移动、点击、键盘输入等），并在这些操作发生时重置计时器。

2. 设置计时器

使用 setTimeout 来创建一个计时器，在一小时内没有操作时触发自动退出登录功能。

3. 实现退出登录逻辑

在计时器触发时，执行自动退出登录的逻辑。

4.代码逻辑

<template>
  <div>
    <!-- Your application content -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeout: null,
      timeoutDuration: 3600000, // 1 hour in milliseconds
    };
  },
  created() {
    this.resetTimeout();
    this.addEventListeners();
  },
  beforeDestroy() {
    this.removeEventListeners();
    if (this.timeout) clearTimeout(this.timeout); // Clean up timeout on destroy
  },
  methods: {
    addEventListeners() {
      window.addEventListener('mousemove', this.resetTimeout);
      window.addEventListener('keypress', this.resetTimeout);
      window.addEventListener('click', this.resetTimeout);
    },
    removeEventListeners() {
      window.removeEventListener('mousemove', this.resetTimeout);
      window.removeEventListener('keypress', this.resetTimeout);
      window.removeEventListener('click', this.resetTimeout);
    },
    resetTimeout() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.logout();
      }, this.timeoutDuration);
    },
    logout() {
        var _this = this;
        // 在这里执行退出登录操作，可以是清除用户信息、跳转到登录页面等
        _this.$store.state.token="";
        this.$router.push('/login');    }
  }
};
</script>

<style>
/* Your styles here */
</style>

5.关键点

1. 超时函数: 使用箭头函数 (() => this.logout()) 确保在计时器超时后调用 logout 方法。
2. 组件销毁: 在 beforeDestroy 钩子中清除计时器，避免组件卸载后仍执行计时器。

3. 监听用户操作: addEventListeners 方法添加了对 mousemove、keypress 和 click 事件的监听，以便在用户活动时重置计时器。

4. 重置计时器: resetTimeout 方法在每次用户操作时清除之前的计时器并设置一个新的计时器。如果在指定的时间段内没有操作，计时器将触发 logout 方法。

5. 退出登录: logout 方法执行退出登录的逻辑，比如清除用户的会话数据并重定向到登录页面。