没有用户活动时自动注销

I want to implement auto logout functionality in a webpage where it will show the login page when there is no activity on this webpage for a predefined interval(say 15 mins,30 mins,45 mins and 60 mins). I have written a function which listens specific events and resets counter.If the counter exceeds then I will call login page.

我想在网页中实现自动注销功能,当预定的时间间隔(例如15分钟,30分钟,45分钟和60分钟)在此网页上没有活动时,它将显示登录页面。我编写了一个侦听特定事件并重置计数器的函数。如果计数器超过,那么我将调用登录页面。

Here , the issue is , calling setInterval on user event makes so many function calls . Let me know , how to avoid this. Or , is there any other solution to achieve this.

这里的问题是,在用户事件上调用setInterval会进行如此多的函数调用。让我知道,如何避免这种情况。或者,是否有任何其他解决方案来实现这一目标。

var inActiveTimeout = 5; //temp
var minInActiveTimeout = 5;
var idleTime = minInActiveTimeout;
var idleIntervalTimer;

function listenEvents() {
            idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000); // multiple of 1 minute
            $('body').mousemove(function (e) {
                console.log(new Date($.now()) + " :: " + "Mouse Move"+idleTime);
                idleTime = minInActiveTimeout;
                clearInterval(idleIntervalTimer);
                idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000);
            });
            $('body').keypress(function (e) {
                console.log(new Date($.now()) + " :: " + "Key Press"+idleTime);
                idleTime = minInActiveTimeout;
                clearInterval(idleIntervalTimer);
                idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000);
            });
            $('body').click(function () {
                console.log(new Date($.now()) + " :: " + "Body Click"+idleTime);
                idleTime = minInActiveTimeout;
                clearInterval(idleIntervalTimer);
                idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000);
            });
}


function logoutTimeCounter() {
            console.log(new Date($.now()) + " :: " + "idleTime  >>" + idleTime + "inActiveTimeout >>" + inActiveTimeout);
            if (idleTime === inActiveTimeout) {
                console.log(" <<Warning >>");
                $('#InactiveTimeoutModal').modal({backdrop: 'static', keyboard: false});
                $("#InactiveTimeoutModal").modal("show");
                clearInterval(idleIntervalTimer);
                setTimeout(logoutTimeCounter, 60000);
            }
            else if (idleTime > inActiveTimeout) { // 20 minutes
                console.log(new Date($.now()) + " :: " + "<< Time elapsed Hide and Logout>>");
                $("#InactiveTimeoutModal").modal("hide");
            }
            idleTime = idleTime + minInActiveTimeout;
}

Thanks

1 个解决方案

#1

That should execute Back-end.

这应该执行后端。

if it is impossible,,, You must monitor user events as scroll, mousemove, click.

如果不可能,,,您必须将用户事件监视为滚动,鼠标移动,单击。

var previous = 0;

document.addEventListener("mousemove", function(evt) {
 if(previous > 0) return;
 previous++;
});

document.addEventListener("click", function(evt) {
  if(previous > 0) return;
  previous++;
});

window.addEventListener("scroll", function(evt) {
  if(previous > 0) return;
  previous++;
});

//other event check..
//document.addEventListener....


setInterval(function(){
  if(previous > 0 )console.log("detect user action");
  else console.log("not detect user action");
},10000);

#1