js 监测用户没有操作退出登录的两种方式（定时器、计数器）

1.情景展示

　　登录系统后，自动监测，当用户长时间未进行操作时，需要重新登录

2.原因分析

　　通过监听鼠标事件及定时器实现

3.解决方案

　　方式一：使用定时器（推荐使用）

/**
 * 鼠标悬浮时触发
 */
window.document.onmouseover = function () {
　　//重置时间
　　oldTime = new Date().getTime();
}
// 这个默认值必须为系统时间（因为可能登录之后就没有操作）
var oldTime = new Date().getTime();
var currentTime;
/**
 * 超时校验
 * @param timeOut
 * 超时时间，单位：毫秒
 */
function checkTimeout(timeOut) {
　　currentTime = new Date().getTime(); //更新当前时间
　　$('#time').html(currentTime - oldTime); // 可以去掉 TODO
　　if (currentTime - oldTime >= timeOut) { //判断是否超时
　　　　// 获取当前用户ID
　　　　var cookie = new Cookie();
　　　　var userid = cookie.GetCookie("FUSERIDID");
　　　　var param = "USERID=" + userid;
　　　　param += "&STATUS=" + 1; // 1-正常
　　　　// 更改当前用户的状态
　　　　var request = new $WebRequest(baseUrl + "/signOut.do", param,
            function (result) {
　　　　　　　　// 跳转到登录页面
　　　　　　　　window.location.href = "login.do";
　　　　});
　　　　request.Start();
　　}
}

/* 定时器 间隔1秒检测一次：是否长时间未操作页面
 * @expalin 调用checkTimeout函数时，需要设置超时时间，单位：毫秒
 */
window.setInterval('checkTimeout(60 * 1000)', 1000);

　　说明：这种方式，是完美解决方案，超时，会自动登出

　　方式二：计数器

/**
 * 设置鼠标移动事件
 */
window.onmousemove = function() {
　　// 过期时间
　　var expireTime = 120;
　　if (i >= 120) {// 超时自动推出
　　　　// 获取当前用户ID
　　　　var cookie = new Cookie();
　　　　var userid = cookie.GetCookie("FUSERIDID");
　　　　var param = "USERID=" + userid;
　　　　param += "&STATUS=" + 1;// 1-正常
　　　　// 更改当前用户的状态
　　　　var request = new $WebRequest(baseUrl + "/signOut.do", param,
　　　　　　function(result) {
　　　　　　　　// 跳转到登录页面
　　　　　　　　window.location.href = "login.do";
　　　　});
　　　　request.Start();
　　}
　　// 重置
　　i = 0;
}
var i = 0;
/**
 * 计数器
 */
function numCounter() {
　　i++;
　　document.getElementById("time").innerHTML = i;// 可以去掉，这里是为了展示效果
　　setTimeout('numCounter()', 1 * 1000);// 1秒计数一次

}

/**
 * 页面加载完毕要执行的操作
 */
$(function() {
	// 必须在页面加载完毕后调用
	numCounter();
});

　　注意：如上图所示，明明已经超时无操作了，却不会自动退出，那是因为鼠标没有动，换句话说，前端实现的效果其实是：超时之后，鼠标进行移动后，才会触发鼠标移动事件，进而检测到已经超时，才会退出登录。非常不友好，所以不建议使用这种方式。

　　另外，这种方式使用鼠标悬浮onmouseover事件，无效。

后台代码实现

public String signOut() {
    try {
        HttpServletResponse response = WebUtils.getResponse();
        // 获取前台参数
        Map mapParam = JsonHelp.getReqParamMapISO();
        // userid非空
        if (!ToolUtils.isEmpty(mapParam.get("USERID"))) {
            IBoBASE_AC_USER iBo = (IBoBASE_AC_USER) BeansHelp.getBeanInstance("iboBaseUser");
            iBo.updateBASE_AC_USER_STATUS(mapParam);
        }
        WebUtils.removeCookie("userId");
        WebUtils.removeCookie("USERCODE");
        WebUtils.removeCookie("USERPASSWORD");
    } catch (Exception e) {
        e.printStackTrace();
    }
    return getResult();
    
}

　　说明：后台处理的时候主要是要考虑退出登录的时候需要清除必须得删掉的cookie。

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

 

posted @ 2020-04-29 17:39  Marydon  阅读(3096)  评论(0)  编辑  收藏  举报