vue3页面无操作，一段时间后自动退出登录

场景：用户登录系统，设置超时时间为20分钟，用户超过20分钟未点击页面，自动退出登录

ps:后端有token校验，就不用在页面修改了，弊端是用户机器的时间修改，判断也就不准确了。

 大概思路就是，登录之后获取时间戳，然后每次点击鼠标获取点击的时间戳，用点击的时间戳减去登录成功的时间戳然后与超时时间作比较，时间戳相减数值单位是毫秒，注意换算，sessionStorage.getItem('loginTime')是我在登陆方法存放的值，用来判断用户是否是登陆状态，只有在该值不为空也就是登录状态下才会触发清除token，退出登录。

modal是框架封装的，具体情况自己解析写一下把。

<template>
  <div id="app" @click="isTimeOut">
    <router-view />
  </div>
</template>

<script>
import { Modal } from '@arco-design/web-vue'

export default {
  name: 'App',

  data() {
    return {
      lastTime: null,
      currentTime: null,
      //10分钟未检测到鼠标点击就退出登录，后台正常校验20h
      timeOut: 10 * 100 * 60,
    }
  },
  created() {
    this.lastTime = new Date().getTime()
  },
  methods: {
    isTimeOut() {
      console.log('点击')
      this.currentTime = new Date().getTime()
      // 判断上次最后一次点击的时间和这次点击的时间间隔
      if (this.currentTime - this.lastTime > this.timeOut) {
        if (null != sessionStorage.getItem('loginTime')) {
          Modal.warning({
            title: '提示',
            content: '身份验证已过期，请重新登录',
            onOk: () => {
              localStorage.clear()
              sessionStorage.clear();
              location.reload()
            },
          });

        }
      } else {
        // 如果在期限内点击，则把这次点击的时间覆盖掉之前存的最后一次点击的时间
        this.lastTime = new Date().getTime()
      }
    }
  }
}
</script>

因为组长提到这个功能了，先是百度看了一些方法，理清思路，慢慢摸索出来的，判断用户是否登录是很有必要的，不能在已经退出或者未登录情况下一直提示用户身份过期，晚上依旧难眠，辗转反侧，把这个小功能记录下吧。