vue 页面长时间无操作退出到登录页

功能: 用户15分钟没有任何操作.页面可以看,但是不能做任何的操作

(想实现的是没有操作就自动退出到login页面)

在App.vue中给事件

<template>
  <div id="app" @mousemove="handleTime">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

data中定义时间

  data() {
    return {
      lastTime: null, //最后一次点击的时间
      currentTime: null, //当前点击的时间
      timeOut: 15 * 60 * 1000, //设置超时时间： 15分钟
    };
  },

  methods: {
    handleTime() {
      this.currentTime = new Date().getTime(); //记录这次点击的时间
      if (this.currentTime - this.lastTime > this.timeOut) {
        //判断上次最后一次点击的时间和这次点击的时间间隔是否大于15分钟
		//大于15分钟,跳转路由到login页
        this.$store.dispatch("user/logout");
        this.$router.push("/login");
      } else {
        this.lastTime = new Date().getTime(); //如果在15分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
      }
    },
    }

在created中 网页第一次打开时，记录当前时间

  created() {
    this.lastTime = new Date().getTime(); //网页第一次打开时，记录当前时间
  },