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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cofecode/article/details/82429016

需求:判断用户活跃情况,超过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()

猜你喜欢

转载自blog.csdn.net/cofecode/article/details/82429016