Vue判断用户长时间未操作

2019-11-11  本文已影响0人  阿羡吖
 <template>
    <div id ="app" @click="isDo()"></div>
</template>

<script>
exoprt default{
  data(){
    return{
        lastTime:null, //第一次点击事件
        currentTime:null,  //当前点击事件
        timeOut:30*60*1000 // 设置超时时间:30分钟
    }
  },
  created(){
    this.lastTime  = new Date().getTime();  // 网页第一次打开时,记录当前时间
  },
   mounted(){
      var quitTIme = window.setInterval(this.testTime,1000);
  },
  methods:{
    isDo(){
      this.currentTime = new Date().getTime(); // 记录当前点击的时间
      if(this.currentTIme - this.lastTime > this.timeOut){ //判断上次最后一次的点击时间和最新的点击时间间隔时候大于30分钟
      // 这里写状态已过期后执行的操作
      localStorage.removeItem("token");
       this.$router.push({ path: '/login' });
        // 清除定时器
       window.clearInterval(quitTIme);
      }else{
        this.lastTime  = new Date().getTime(); //如果30分之内点击,则把最新时间记录覆盖掉之前存的最后一次点击时间
      }
    }
  }
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读