前端如何限制（控制）用户登录时长

前端如何限制（控制）用户登录时长

2022年8月8日 写

简述：

所谓限制登录的时长，就是用户进入页面后长时间没有如何的操作，最常见的比如银行的 APP 登录；想必用过掌上银行APP的都知道，当我们离开页面运行后台一会，就会让我们重新登录，这就是限制了我们的登录时长

下面我就对自己常用的一种方式进行分享

这里说明一下使用框架为Vue2

代码部分
Login.vue 页面部分
	methods:{
		//这里写入一个事件，点击登录时获取当前的事件并保存到本地中
		loginBtn(){
		//这里我使用的是本地存储中的 sessionStorage 方式；这就要说一下它的特点了，它是存储方式中时间短暂，而且不用我们手动去清除（离开页面或关闭浏览器自动清除），这就避免了我们在本地存储了大量的时间
			sessionStorage.setItem('loginFirstTime',new Date().getTime())
		//保存一个标识
			sessionStorage.setItem('firstTime','firstTime')
		//此时时间保存完成，正常执行进入首页
			this.$router.push({path:'/home'})
		}
	}
//
Home.vue  首页部分
//在初始化（created）时，通过 addEventListener 对页面的事件（点击、滚动）等进行监听，在这里它的
第三个参数要设置为 true ；因为addEventListener 默认是冒泡事件，设置为true 改为捕获事件，这样我们
无论点击任何一个位置它都可以从最外层捕获到具体的元素所触发的事件

created(){
	window.addEventListener('click',()=>{
		//在这里再一次获取时间，方便后面进行比较,名称和前面一样，为了获取进入首页后的最新一次事件的时间
		sessionStorage.seItem('loginFirstTime',new Date().getTime())
	}，true)
}，
mounted(){
	this.timeDifference()
},
methods:{
	timeDifference(){
		clearInterval(this.timer)
		this.timer = setInterval(()=>{//n代表一个数字
			let newClickTime = sessionStorage.getItem('loginFirstTime')*n//获取最新的上一次点击时间并转换成数字
			let nowTime = new Date().getTime(); // 获取当前最新时间
			//此时当前最新时间与上一次点击最新的时间进行比较
			if(nowTime - newClickTime > 1000 * n){
				// 提示一下用户登录即将超时退出
          		this.$message({ type: "warning", message: "已超时，强制退出登录" });
          		// 这里要清除定时器，结束任务
          		clearInterval(this.timer);
          		// 最后返回到登录页面
          		this.$router.push({ path: "/login" });
			}
		},1000)
	}
}，
beforeDestroy(){
	//在网页销毁前或者离开页面前清除定时器和解绑事件
	clearInterval(this.timer)
	window.addEventListener('click',()=>{},true)
}