Vue 用户30分钟未操作,页面跳转到登录页

<template>
	<div id="app">
		<router-view/>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//设置超时时间: 30分种
			timeOut : 30 * 60 * 1000,
			// timeOut : 30 * 1000,
			lastTimeStoreId: 'lastTime_jc'
		}
	},    
	methods: {
        // 存储当前时间
        setLastTime() {
            localStorage.setItem(this.lastTimeStoreId,new Date().getTime());
        },
        // 获取时间
        getLastTime() {
            return localStorage.getItem(this.lastTimeStoreId);
        },
        // 删除
        removeLastTime() {
            localStorage.removeItem(this.lastTimeStoreId)
        },
        checkTimeout() {
            // 登录页面不监听
            if(this.timeOut && this.$router.currentRoute.name === 'login') {
                this.setLastTime();
            }
            else {
                //更新当前时间
                let currentTime = new Date().getTime();
                let lastTime = this.getLastTime();
                // console.log(currentTime, lastTime, (currentTime - lastTime), this.timeOut);
                //判断是否超时
                if (currentTime - lastTime > this.timeOut) {
                    this.$router.push('/');
                    this.$message({ type: 'warning', message: '界面超过30分钟未操作,需重新登录' })
                }
            }
        },
    },
	mounted() {
		let that = this;
		// 每30秒 调用检查时间的方法
		this.$nextTick(function () {
			setInterval(this.checkTimeout, 30000);
			// setInterval(this.checkTimeout, 1000);
		})
		// 页面监听 按下鼠标更新操作时间
		window.onload = function () {
			window.document.onmousedown = function () {
                that.setLastTime();
            }
            window.document.onkeydown = function () {
                that.setLastTime();
            }
		};
  	}
};
</script>

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值