Vue 实现登陆后长时间未点击自动退出登录

具体的实现思路如下;当前时间 - 最后一次点击的时间 > 超时时间

当鼠标点击的时候，最后一次点击时间更新

前端不断的刷新当前时间并最后一次点击时间进行比较，若大于超时时间则判断用户是否在登录状态，若在登录状态退出登录，其中，登录状态由sessionStorage保存

关于App.vue：App.vue是Vue项目的主组件，所有的页面都是在App.vue下进行切换的，其切换的方法主要是通过router.js下的路径进行切换的。所以当App.vue的div被点击后，更新最后一次点击时间，可以实现监听所有页面是否被监听

<template>
    <div id="app" @click="clicked">
        // TO DO
    </div>
</template>

关于mounted：
1.钩子函数：钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤、访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统

2.相对于前端来说，钩子函数就是指所有函数执行前，我先执行了函数，即勾住我感兴趣的函数，只要它执行，我就先执行
3.与created相比：mounted主要是在模板渲染成html后，通常是初始化页面完成之后，再对html dom节点进行操作

export default {
  name: "App",
  data() {
    return {
      lTime: new Date().getTime(), // 最后一次点击的时间
      ctTime: new Date().getTime(), //当前时间
      tOut: 10 * 60 * 1000   //超时时间10min
    };
  },
  mounted() {
    window.setInterval(this.tTime, 1000);
  },
  methods: {
    clicked() {
      this.lTime = new Date().getTime(); //当界面被点击更新点击时间
    },
    tTime() {
      this.cTime = new Date().getTime();
      if (this.lTime - this.ctTime > this.tOut) {
        if (sessionStorage.getItem("userType")) {
          // 退出登录
          sessionStorage.clear();
          location.reload();
          this.$router.push("/login");
        }
      }
    }
  }
};