vue增加长时间无操作退出登录功能
目录
1. 监控用户操作
2. 设置计时器
3. 实现退出登录逻辑
4.代码逻辑
5.关键点
1. 监控用户操作
你需要监听用户的操作（例如鼠标移动、点击、键盘输入等），并在这些操作发生时重置计时器。
2. 设置计时器
使用 setTimeout 来创建一个计时器，在一小时内没有操作时触发自动退出登录功能。
3. 实现退出登录逻辑
在计时器触发时，执行自动退出登录的逻辑。
4.代码逻辑
<template><div><!-- Your application content --></div>
</template><script>
export default {data() {return {timeout: null,timeoutDuration: 3600000, // 1 hour in milliseconds};},created() {this.resetTimeout();this.addEventListeners();},beforeDestroy() {this.removeEventListeners();if (this.timeout) clearTimeout(this.timeout); // Clean up timeout on destroy},methods: {addEventListeners() {window.addEventListener('mousemove', this.resetTimeout);window.addEventListener('keypress', this.resetTimeout);window.addEventListener('click', this.resetTimeout);},removeEventListeners() {window.removeEventListener('mousemove', this.resetTimeout);window.removeEventListener('keypress', this.resetTimeout);window.removeEventListener('click', this.resetTimeout);},resetTimeout() {if (this.timeout) {clearTimeout(this.timeout);}this.timeout = setTimeout(() => {this.logout();}, this.timeoutDuration);},logout() {var _this = this;// 在这里执行退出登录操作，可以是清除用户信息、跳转到登录页面等_this.$store.state.token="";this.$router.push('/login'); }}
};
</script><style>
/* Your styles here */
</style>
5.关键点
- 超时函数: 使用箭头函数 (
() => this.logout()) 确保在计时器超时后调用logout方法。 - 组件销毁: 在
beforeDestroy钩子中清除计时器，避免组件卸载后仍执行计时器。 -
监听用户操作:
addEventListeners方法添加了对mousemove、keypress和click事件的监听，以便在用户活动时重置计时器。 -
重置计时器:
resetTimeout方法在每次用户操作时清除之前的计时器并设置一个新的计时器。如果在指定的时间段内没有操作，计时器将触发logout方法。 -
退出登录:
logout方法执行退出登录的逻辑，比如清除用户的会话数据并重定向到登录页面。