前端判断用户活跃情况,长时间不活跃自动退出登录

该博客探讨了如何在前端判断用户活跃状态,通过监测最后的用户操作时间或鼠标移动来实现超过30分钟不活跃自动退出登录的功能。这种方法旨在提高应用安全性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:判断用户活跃情况,超过30分钟不活跃直接退出登录。

本想一开始记录下最后一次请求的时间,用最后一次请求的时间去判断用户的活跃程度。这样也有点局限。

网上搜了一下,说用鼠标移动状态来检测是否在操作页面。不能说完全不好,但也算是一种方法。于是…

// 检测用户活跃情况
function isActive() {
    var arr = ['index', 'login']
    var result = arr.some(function(item) {
        return window.location.href.indexOf(item) > 0
    })
    // result 表示当前页面可能是index或者注册页面 
    // 不是index页面 ,不是注册页面才会去检测用户的活跃状态(鼠标移动状态)
    if (!result) {
        var lastTime = new Date().getTime();
        var currentTime = new Date().getTime();
        //设置超时时间: 10分
        var timeOut = 10 * 60 * 1000; 

        window.onload = function() {
            /* 检测鼠标移动事件 */
            document.addEventListener('mousemove', function() {
                // 更新最后的操作时间
                console.log('鼠标移动了')
                lastTime = new Date().getTime();
            })
        }

        /* 定时器  间隔1分钟,检测是否长时间未操作页面  */
        var quitTime = window.setInterval(testTime, 60000);

        // 超时函数
        function testTime() {
            //更新当前时间
            currentTime = new Date().getTime();
            console.log('currentTime', currentTime)
            //判断是否超时
            if (currentTime - lastTime > timeOut) {
                // console.log('超时拉')
                // 超时操作
                axios.post(logoutUrl,params)
                .then(function (res) {
                  // 写超时执行的代码,例如退出登录什么的
                })
                .catch(function (error) {
                  console.log(error);
                });
                // 清除掉定时器
                window.clearInterval(quitTime)
            }
        }
    }
}

isActive()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值