菜鸟请教，在vue里页面怎么添加一段时间不操作超时就跳回登录页面

Question

菜鸟请教，在vue里页面怎么添加一段时间不操作超时就跳回登录页面

Answer 1

a.vue 里面的代码

isTimeout这个方法 一秒钟后执行跳转到登录界面

created(){
    this.isTimeout()
},
methods:{
    isTimeout(){
        setTimeout(()=>{
            this.$router.push(path:'/login')
        },1000)
    } 
}

Answer 2

<template>
<!-- 添加点击事件 -->
<div id="app" style="height: 100%" @click="isTimeOut">

<router-view/>

</div>
</template>

<script>
export default {
name: 'App',

data () {

return {
  lastTime: null, // 最后一次点击的时间
  currentTime: null, // 当前点击的时间
  timeOut: 30 * 60 * 1000 // 设置超时时间:30分钟
}

},
created () {

this.lastTime = new Date().getTime()

},
methods: {

isTimeOut () {
  this.currentTime = new Date().getTime() // 记录这次点击的时间
  if (this.currentTime - this.lastTime > this.timeOut) { // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于30分钟
    if (localStorage.getItem('loginInfo')) { // 如果是登录状态
      this.$router.push({name: 'login'})
    } else {
      this.lastTime = new Date().getTime()
    }
  } else {
    this.lastTime = new Date().getTime() // 如果在30分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
  }
}

}
}
</script>