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>