一、描述
由于等保的需要,出于安全考虑,需要实现用户在30min内,不操作页面的话,需要自动退出到登录页面,实现的方案有好多种 例如:使用session:后端开发人员设置session的过期时间,长时间(例如30分钟)无请求就会自动清除,达到长时间无操作自动退出的目的、前端全局监听点击事件、结合websocket实时推送用户状态等,
二、思路
讲一个不用后端配合,前端实现该功能的方案; 用户操作:移动,拖动、点击、滚动等,基本大部分的操作都需要用户进行点击操作、实现思路:
1、全局监听用户的点击时间,保存用户最后一次的点击事件:lastClickTime
2、启动一个定时器,实时记录当前时间: nowTime
3、用户多长时间不操作页面: noOperateTime
当nowTime - lastClickTime > noOperateTime ,执行用户退出操作
三、代码实现
代码如下,直接封装的一个组件,使用的时候在app.vue直接引进组件即可
<template>
<div></div>
</template>
<script>
export default {
data() {
return {
timer: null,
noOperateTime: 1000 * 60 * 30 // 用户不操作的时间
}
},
created() {},
mounted() {
/*
第一步:
组件初始化加载就绑定监听点击事件,注意:addEventListener的第三个参数,这里要加上。
因为第三个参数决定了是冒泡还是捕获(false冒泡默认,true捕获),因为绑定监听点击事件,我们是在最
顶层的DOM位置进行捕获点击事件,所以第三个参数true,要加上的,这样的话,内层的任意地方的点击事件
我们就都能监听到了,然后存储一下点击的时间
*/
window.addEventListener(
'click',
() => {
// 为了方便,我们把点击事件的时间直接存到sessionStorage中去,这样方便获取比较
sessionStorage.setItem('lastClickTime', new Date().getTime())
},
true
)
this.isTimeOut()
},
beforeDestroy() {
// 最后一步,离开页面的时候,清除一下定时器,也解绑点击事件
clearInterval(this.timer)
window.removeEventListener('click', () => {}, true)
},
methods: {
isTimeOut() {
clearInterval(this.timer)
this.timer = setInterval(() => {
let isLoginHref = window.location.pathname
if (!isLoginHref.includes('/login')) {
let lastClickTime = Number(sessionStorage.getItem('lastClickTime'))
let nowTime = new Date().getTime()
if (nowTime - lastClickTime > this.noOperateTime) {
this.$message.error('您已经30分钟没有操作产康运营管理平台,请重新登录使用。')
// 退出逻辑
this.$router.push('/login')
}
}
}, 1000 * 60)
}
}
}
</script>