vue 十分钟后自动返回首页登录页操作

vue 十分钟后自动返回首页/登录页操作

​ 该上线了，产品经理提出一个 新需求，要求所有页面，在无任何操作停留10分钟后，自动返回首页。这让我想到了 导航守卫 做 一段时间后登陆过期，返回登录页的 需求。 我看了文档 afterEach 全局后置钩子 是导航后置守卫 跟咱常用的 beforeEach 前置守卫 基本用法 一直 就是没有next 方法。 说实话我对它不太熟，文档介绍的 也就一句话，没敢乱用，这里想借鉴其他方法。

闲话不多说 代码贴上

1.下面这一种方法 是 十分钟 无操作后 再次点击页面 才会 返回首页，而且有不少的 bug，大家可以借鉴一下：

<template>
    <div id="app" @click="isDo()">
        <router-view></router-view>
    </div>
</template>

<script>
  import * as log from 'loglevel'
  import 'normalize.css'
  import 'animate.css'
  import 'element-ui/lib/theme-chalk/index.css'
  import '../style/font-awesome.css'
  import '../style/iconfont.css'
  import '../style/style.scss'

  export default {
    name: 'app',
      data() {
            return {
                lastTime: null, //最后一次点击的时间
                currentTime: null, //当前点击的时间
                timeOut: 1 * 10 * 1000 //设置超时时间： 10分钟
            };
        },

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

      methods: {
          isDo() {
              this.currentTime = new Date().getTime(); //记录这次点击的时间
              if(this.currentTime - this.lastTime > this.timeOut) {  //判断上次最后一次点击的时间和这次点击的时间间隔是否大于10分钟
               log.info('0000000000000000000000000000000000000======>超时')
                  // 这里写状态已过期后执行的操作
                  this.lastTime = new Date().getTime();
                  return this.$router.push('/')
                 
              } else {
                  this.lastTime = new Date().getTime(); //如果在10分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
              }
          }
      },

  }
</script>

<style scoped>
    #app {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
</style>

下面是 长时间 不操作页面后 自动返回 的js逻辑：

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

<script>
  import * as log from 'loglevel'
  import 'normalize.css'
  import 'animate.css'
  import 'element-ui/lib/theme-chalk/index.css'
  import '../style/font-awesome.css'
  import '../style/iconfont.css'
  import '../style/style.scss'

  export default {
    name: 'app',
    data() {
      return {
        timeOut: '',
      };
    },
    created(){
      this.isTimeOut();
    },
    methods: {    
        throttle(fn, wait) {   // 节流throttle代码（时间戳+定时器）
          var timer = null;     // 定义一个变量来 储存定时器
          var startTime = Date.now();     // 存开始时间
          return function() {            
            var curTime = Date.now();     // 存现在时间       
            var remaining = wait - (curTime - startTime);             
            var context = this;             
            var args = arguments;             
            clearTimeout(timer);              
            if (remaining <= 0) {                    
                fn.apply(context, args);                    
                startTime = Date.now();              
            } else {                    
                timer = setTimeout(fn, remaining);              
            }      
          }
        },
        handle() {    
          clearInterval(this.timeOut); 
          // console.log(Math.random()); 
          log.info('========>','我清除了吗？')
          if (this.$route.path == '/frame/home') {
            return
          }
          let This = this
          this.timeOut = setInterval(()=>{
            log.info('this.$route.path',this.$route.path)
            this.$message.success('长时间未操作，请重新登录')
            this.$router.push('/')
            return clearInterval(this.timeOut);
          },1000*10*1)
          // },10000)
        },
        isTimeOut() {
          document.body.onmouseup = this.throttle(this.handle, 1000);
          document.body.onmousemove = this.throttle(this.handle, 1000);
          document.body.onkeyup  = this.throttle(this.handle, 1000);
          document.body.onclick  = this.throttle(this.handle, 1000);
          document.body.ontouchend  = this.throttle(this.handle, 1000);
          window.addEventListener('resize', this.throttle(this.handle, 1000));
          window.addEventListener('scroll', this.throttle(this.handle, 1000));
        },
    }
  }
</script>

<style scoped>
    #app {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
</style>