Vue实现页面长时间不操作自动退出

2022-07-14 08:31:22 阅读：314 来源： 互联网

标签：Vue 点击 vue 超时长时间 login lastTime store 页面

原文链接：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>

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>

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>

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
好啦，然后就可以实现页面长时间不点击自动退出到登录界面的效果啦，可以试下，在任何地方点击，时间都会重新开始计算时间~
不管写在哪个框架里，还是写在自己的代码里，思路都是这样滴~

标签：Vue,点击,vue,超时,长时间,login,lastTime,store,页面
来源： https://www.cnblogs.com/fswhq/p/16454913.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue实现页面长时间不操作自动退出