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。

寫在最后

  哪位大佬如若發現文章存在紕漏之處或需要補充更多內容,歡迎留言!!!

 相關推薦:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM