js实现页面长时间不操作返回登录页面

原创于 2020-03-25 10:37:26 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一种使用JavaScript实现的页面超时自动登出功能。通过记录用户首次进入页面的时间，设置定时器每3秒检查一次，若超过设定的超时时间（例如10分钟），将弹出提示框提醒用户重新登录，并在确认后跳转至登录页面。此方案适用于需要增强安全性，防止长时间未操作导致的安全风险场景。

1. 记录进入页面时间；

2. 设置定时器，隔3秒记录一次当前时间；

3. 如果当前时间-第一次进入时间>过期时间，弹出layer提示框；

4. 点击确定，跳转登录页面。

上代码：

var firstTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 10 * 60 * 1000;
var timeId = window.setInterval(testTime, 3000);

$(function () {
    /* 鼠标移动事件 */
    $(document).mouseover(function () {
        firstTime = new Date().getTime(); //更新操作时间

    });
});

function testTime() {
    currentTime = new Date().getTime(); //更新当前时间
    if (currentTime - firstTime > timeOut) { //判断是否超时
        clearTimeout(timeId);
        //layer.msg("您五分钟未进行操作，请重新登录");
        layer.confirm(
            '您十分钟未进行操作，请重新登录',
            {btn:['确定'],icon: 4, title:'提示',closeBtn:0},
            function(index){

            layer.close(index);
            window.parent.location.href = "/login";
        });
    }
}