30分钟用户不操作页面，返回用户登录页

       一、描述

       由于等保的需要，出于安全考虑，需要实现用户在30min内，不操作页面的话，需要自动退出到登录页面，实现的方案有好多种 例如：使用session:后端开发人员设置session的过期时间,长时间(例如30分钟)无请求就会自动清除,达到长时间无操作自动退出的目的、前端全局监听点击事件、结合websocket实时推送用户状态等，

        二、思路

        讲一个不用后端配合，前端实现该功能的方案; 用户操作:移动，拖动、点击、滚动等，基本大部分的操作都需要用户进行点击操作、实现思路：

       1、全局监听用户的点击时间，保存用户最后一次的点击事件：lastClickTime

       2、启动一个定时器，实时记录当前时间： nowTime

       3、用户多长时间不操作页面：  noOperateTime

       当nowTime - lastClickTime > noOperateTime ，执行用户退出操作

          三、代码实现

       代码如下，直接封装的一个组件，使用的时候在app.vue直接引进组件即可

<template>
  <div></div>
</template>
<script>

export default {
  data() {
    return {
      timer: null,
      noOperateTime: 1000 * 60 * 30 // 用户不操作的时间
    }
  },
  created() {},
  mounted() {
    /*
      第一步：
        组件初始化加载就绑定监听点击事件，注意：addEventListener的第三个参数，这里要加上。
        因为第三个参数决定了是冒泡还是捕获（false冒泡默认，true捕获），因为绑定监听点击事件，我们是在最
        顶层的DOM位置进行捕获点击事件，所以第三个参数true，要加上的，这样的话，内层的任意地方的点击事件
        我们就都能监听到了，然后存储一下点击的时间
    */
    window.addEventListener(
      'click',
      () => {
        // 为了方便，我们把点击事件的时间直接存到sessionStorage中去，这样方便获取比较
        sessionStorage.setItem('lastClickTime', new Date().getTime())
      },
      true
    )
    this.isTimeOut()
  },
  beforeDestroy() {
    // 最后一步，离开页面的时候，清除一下定时器，也解绑点击事件
    clearInterval(this.timer)
    window.removeEventListener('click', () => {}, true)
  },
  methods: {
    isTimeOut() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        let isLoginHref = window.location.pathname
        if (!isLoginHref.includes('/login')) {
          let lastClickTime = Number(sessionStorage.getItem('lastClickTime'))
          let nowTime = new Date().getTime()
          if (nowTime - lastClickTime > this.noOperateTime) {
            this.$message.error('您已经30分钟没有操作产康运营管理平台,请重新登录使用。')
            // 退出逻辑
            this.$router.push('/login')
          }
        }
      }, 1000 * 60)
    }
  }
}
</script>