一、超时以后自动退出
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
let time = null
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(() => {
}, 2000)
},1000 * 60 * 30 * 4)
},
},
created() {
window.addEventListener('click', () => {
if(this.$route.path != '/'){
this.currentTime();
}
})
},
};
</script>
二、超时以后用户点击、滚动后自动退出
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
let timmer = null
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() {
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)
},
};
</script>