如何在Javascript中实现自动注销

Question

下面的代码大部分都有效，但我想知道是否可以稍微调整一下。如果在 x 毫秒内没有鼠标活动，则会显示一个弹出窗口，提示您将被注销。然后，如果 / 当您单击确定按钮时，脚本将自动将您带到注销文件。

但是，如果在 x 毫秒后未单击 ok 按钮，我还想将屏幕带到 logout.php 文件。有谁知道我可以如何使用下面的代码来做到这一点？ 谢谢

// Set timeout variables.
var timoutWarning = 840000; // Display warning in 14 Mins.
var timoutNow = 100000; // Timeout in 15 mins would be 900000.
var logoutUrl = 'logout.php'; // URL to logout page.

var warningTimer;
var timeoutTimer;

// Start timers.
function StartTimers() {
    warningTimer = setTimeout("IdleWarning()", timoutWarning);
    timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
}

// Reset timers.
function ResetTimers() {
    clearTimeout(warningTimer);
    clearTimeout(timeoutTimer);
    StartTimers();
    $("#timeout").dialog('close');
}

// Show idle timeout warning dialog.
function IdleWarning() {
//  $("#timeout").dialog({
    //modal: true
    alert("Warning, your page will redirected to login page. Due to not move your mouse within the page in 15 minutes.");
//});
}

// Logout the user.
function IdleTimeout() {
    window.location = logoutUrl;
}

Answer 1

从概念上讲，您一次只需要运行 1 个计时器。一个计时器运行 14 分钟，另一个计时器运行一分钟（总共 15 分钟）。一旦 14 分钟计时器用完，将其杀死，然后启动 1 分钟计时器。如果该一分钟计时器用完，请注销用户。如果用户按下“保持登录”按钮，则终止 1 分钟计时器并重新启动 14 分钟计时器。冲洗并重复。

我尽我所能更改了您的代码。希望你明白这一点。

// Set timeout variables.
var timoutWarning = 840000; // Display warning in 14 Mins.
var timoutNow = 60000; // Warning has been shown, give the user 1 minute to interact
var logoutUrl = 'logout.php'; // URL to logout page.

var warningTimer;
var timeoutTimer;

// Start warning timer.
function StartWarningTimer() {
    warningTimer = setTimeout("IdleWarning()", timoutWarning);
}

// Reset timers.
function ResetTimeOutTimer() {
    clearTimeout(timeoutTimer);
    StartWarningTimer();
    $("#timeout").dialog('close');
}

// Show idle timeout warning dialog.
function IdleWarning() {
    clearTimeout(warningTimer);
    timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
    $("#timeout").dialog({
        modal: true
    });
    // Add code in the #timeout element to call ResetTimeOutTimer() if
    // the "Stay Logged In" button is clicked
}

// Logout the user.
function IdleTimeout() {
    window.location = logoutUrl;
}

Answer 2

我必须为我们的项目执行相同的功能。 使用了以下代码：-

 <script>
   $(document).click(function(){
        if(typeof timeOutObj != "undefined") {
            clearTimeout(timeOutObj);
        }

        timeOutObj = setTimeout(function(){ 
            localStorage.clear();
            window.location = "/";
        }, 1200000);   //will expire after twenty minutes

   });
</script>

上面的代码会在我们每次点击屏幕上的任意位置时设置一个计时器。 如果我们不点击它会自动退出到主屏幕。

Answer 3

 <script type="text/javascript">
             var IDLE_TIMEOUT = 10; //seconds
                var _idleSecondsCounter = 0;
                document.onclick = function() {
                _idleSecondsCounter = 0;
                };
                document.onmousemove = function() {
                _idleSecondsCounter = 0;
                };
                document.onkeypress = function() {
                _idleSecondsCounter = 0;
                };
                window.setInterval(CheckIdleTime, 1000);

                function CheckIdleTime() {
                _idleSecondsCounter++;
                var oPanel = document.getElementById("SecondsUntilExpire");
                if (oPanel)
                oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
                if (_idleSecondsCounter >= IDLE_TIMEOUT) {
                //alert("Time expired!");
                document.location.href = "logout.php";
                }
                }
        </script>

Answer 4

更新@VtoCorleone 的回答：

var warningTimeout = 840000;
var timoutNow = 60000;
var warningTimerID,timeoutTimerID;

function startTimer() {
    // window.setTimeout returns an Id that can be used to start and stop a timer
    warningTimerID = window.setTimeout(warningInactive, warningTimeout);
}

function warningInactive() {
    window.clearTimeout(warningTimerID);
    timeoutTimerID = window.setTimeout(IdleTimeout, timoutNow);
    $('#modalAutoLogout').modal('show');
}

function resetTimer() {
    window.clearTimeout(timeoutTimerID);
    window.clearTimeout(warningTimerID);
    startTimer();
}

// Logout the user.
function IdleTimeout() {
    document.getElementById('logout-form').submit();
}

function setupTimers () {
    document.addEventListener("mousemove", resetTimer, false);
    document.addEventListener("mousedown", resetTimer, false);
    document.addEventListener("keypress", resetTimer, false);
    document.addEventListener("touchmove", resetTimer, false);
    document.addEventListener("onscroll", resetTimer, false);
    startTimer();
}

$(document).on('click','#btnStayLoggedIn',function(){
    resetTimer();
    $('#modalAutoLogout').modal('hide');
});

$(document).ready(function(){
    setupTimers();
});

Answer 5

只需使用此代码。

        var timeoutTimer;
        var expireTime = 1000*60*30;
        function expireSession(){
            clearTimeout(timeoutTimer);
            timeoutTimer = setTimeout("IdleTimeout()", expireTime);
        }
        function IdleTimeout() {
            localStorage.setItem("logoutMessage", true);
            window.location.href="{{url('logout')}}";
        }
        $(document).on('click mousemove scroll', function() {
            expireSession();
        });
        expireSession();