原文链接：https://blog.csdn.net/Yolanda_NuoNuo/article/details/116594217
一、背景描述
现在要做这么一个需求，就是在页面上用户长时间没有操作，就认为是不活跃，自动退出到登录页面。
以vue-element-admin这个开源项目为例来说明，知道方法再套用到自己的系统上就可以啦~
二、准备工作
既然是以vue-element-admin为例，所以要先下载一下这个基础模板
vue-element-template基础开发模板
三、开始编码
（一）实现思路
1、在App.vue中监控点击事件，记录上一次操作时间，每次点击都会更新一下这个时间；
2、在登录后的首页里启动一个定时器，定时去检查用户是否从长时间没有操作；
3、判断用户长时间没有操作的办法是，当前时间减去上一次的操作时间，这个时间如果大于设置的超时时间，那就可以退出啦~
（二）来实现啦
1、先在src/store/modules目录下新建一个store文件login.js，可以存系统的上一次点击时间
/**
* ClassName: vue-admin-template-master <br/>
* Description: <br/>
* Date: 2021/5/9 10:43 PM <br/>
* <br/>
*
* @author Yolanda
*
* 修改记录
* @version 1.0.0 2021/5/9 Yolanda Initial Version<br/>
*
*/
const state = {
// 上一次点击页面的时间
lastTime: new Date().getTime(),
};
const mutations = {
SET_LASTTIME: (state, lastTime) => {
state.lastTime = lastTime;
}
};
const actions = {
};
export default {
namespaced: true,
state,
mutations,
actions
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2、再在src/store/index.js中引入这个store文件login.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
// 引入login
import login from './modules/login'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
login
},
getters
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3、在src/App.vue中添加点击事件，记录最新一次点击操作的时间
<template>
<div id="app" @click="updateLastTime()">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
updateLastTime(){
this.$store.commit('login/SET_LASTTIME'
, new Date().getTime());
console.log(this.$store.state.login.lastTime)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
4、在src/views/dashboard/index.vue中
<template>
<div class="dashboard-container">
<div class="dashboard-text">name: {{ name }}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Dashboard',
data() {
return {
// 上一次点击时间
lastTime: null,
// 当前时间
currentTime: null,
// 超时时间, 如果半个小时都没有点击页面就算超时
sys_timeout: 30 * 60* 1000,
// 检查的时间，每隔5分钟检查一次有没有超时
check_time: 5 * 60 * 1000,
// 计时器
whole_timer: null
}
},
created() {
// 启动这个定时器
this.isLoginOut();
},
computed: {
...mapGetters([
'name'
])
},
methods: {
// 判断是否超时
isTimeOut(){
// 页面上一次的点击时间
this.lastTime = this.$store.state.login.lastTime;
this.currentTime = new Date().getTime();
// 超时了
if((this.currentTime - this.lastTime) > this.sys_timeout) {
return true;
} else {
return false;
}
},
isLoginOut() {
// console.log("11111:" + this)
// 每次用定时器之前先清除一下
clearInterval(this.whole_timer);
// 这里要备份一下this指针
let _this = this;
this.whole_timer = setInterval(function () {
console.log(_this.isTimeOut())
// 判断一下是否超时，如果超时了就退出
if (_this.isTimeOut()) {
// console.log("22222:" + this)
_this.$store.dispatch('user/logout');
_this.$router.push(`/login?redirect=${_this.$route.fullPath}`);
// 如果退出了就清除这个定时器，这里要延迟一秒清除，因为跳转到登录界面会有一点点延迟~
setTimeout(function() {
clearInterval(_this.whole_timer);
}, 1000);
}
}, _this.check_time);
}
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
好啦，然后就可以实现页面长时间不点击自动退出到登录界面的效果啦，可以试下，在任何地方点击，时间都会重新开始计算时间~
不管写在哪个框架里，还是写在自己的代码里，思路都是这样滴~