vue+element 登录超时自动退出

一、超时以后自动退出

//   APP.vue 
//   '/'是login页面路由
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
let time = null //超时退出 定时器 必须放到全局，解决vue数据同步导致无法清除定时器
export default {
  name: "app",
  data() {
    return {
    }
  },
  methods: {
    currentTime(){ // 超时退出     
      if(time){
        window.clearTimeout(time)
        time = null
      }
      time = window.setTimeout(()=>{
        this.$message({
            message: '登录超时，将返回登录页',
            type: 'error',
            duration: 1500
        })
        setTimeout(() => {
          //this.loginOut()
        }, 2000)
      },1000 * 60 * 30 * 4)
    },
  },
  created() {
    window.addEventListener('click', () => {
      if(this.$route.path != '/'){
        this.currentTime();
      }
    })
  },
};
</script>

二、超时以后用户点击、滚动后自动退出

//   APP.vue 
//   '/'是login页面路由
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
let timmer = null //超时退出 定时器 必须放到全局，解决vue数据同步导致无法清除定时器
export default {
  name: "app",
  data() {
    return {
      lastTime:null,//超时退出 最后时间
    }
  },
  methods: {
    currentTime(){ // 超时退出     
       const currentTime = new Date();
       if (currentTime - this.lastTime > 1000 * 60 * 30 ) {
         this.lastTime = currentTime
         if (this.$route.path != '/') {
           this.$message({
               message: '登录超时，将返回登录页',
               type: 'error',
               duration: 1500
           })
           setTimeout(() => {
             this.loginOut()
           }, 2000)
         }
       } else {
         this.lastTime = currentTime;
       }
    },
  },
  created() {
    //超时退出 start
    this.lastTime = new Date();
  
     window.addEventListener('resize', () => {
       if (timmer) {
         clearTimeout(timmer);
       }
       timmer = setTimeout(() => {
         if(this.$route.path != '/'){
	        this.currentTime();
	      }
       }, 3000)
     })

    window.addEventListener('click', () => {
      if (timmer) {
         clearTimeout(timmer);
       }
       timmer = setTimeout(() => {
         if(this.$route.path != '/'){
	        this.currentTime();
	      }
       }, 3000)
    })
      
     window.addEventListener('scroll', () => {
       if (timmer) {
         clearTimeout(timmer);
       }
       timmer = setTimeout(() => {
         if(this.$route.path != '/'){
	        this.currentTime();
	      }
       }, 3000)
     }, true)

     window.addEventListener('mousemove', () => {
       if (timmer) {
         clearTimeout(timmer);
       }
       timmer = setTimeout(() => {
         if(this.$route.path != '/'){
	        this.currentTime();
	      }
       }, 3000)
     }, true)
    //超时退出 end
  },
};
</script>