监听检测页面长时间未操作后事件

代码写于App.vue页面,相当于全局监听,每个路由是被包含在div中的!

<template>
  <div id="app"  @click="clickDiv">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      lastTime: null, // 最后一次点击的时间
      currentTime: null, // 当前点击的时间
      timeOut: 10 * 60 * 1000, // 设置超时时间:10分钟
      timeInterval: "",
    };
  },
  methods: {
    clickDiv() {
      if (this.timeInterval == "") {
       // 5秒钟检测一次
        this.timeInterval = setInterval(this.isTimeOut, 5000);
      }
      this.lastTime = new Date().getTime();
    },
    isTimeOut() {
      this.currentTime = new Date().getTime(); // 当前时间
      // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于规定的时间,例:10分钟
      if (this.currentTime - this.lastTime > this.timeOut) {
        //判断是否为登录状态,只有登录状态下才调用方法
        if (sessionStorage.token) {
          sessionStorage.clear();
          clearInterval(this.timeInterval);
          this.timeInterval = "";
          this.$router.push({
            name: "login",
          });
          //先返回首页,在给提示,可以根据具体需求调整
          this.$alert("检测到您长时间未操作页面,请重新登录!", "温馨提示", {
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      }
    },
  },
};
</script>

__EOF__

本文作者：CoderI
本文链接：https://www.cnblogs.com/CoderI/p/18108863.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！