快捷導(dǎo)航

js關(guān)閉瀏覽器時退出賬號的處理

更新時間：2021年12月03日 15:16:07 作者：hyz1840

某些網(wǎng)站，尤其是涉及錢的網(wǎng)站，現(xiàn)在基本都有一個機(jī)制是兩小時后登陸自動失效，要重新登陸確認(rèn)身份，那么js關(guān)閉瀏覽器時退出賬號如何實(shí)現(xiàn)，感興趣的可以了解一下

經(jīng)典做法

眾所周知，為了賬戶安全，用戶未主動點(diǎn)擊注銷系統(tǒng)時，直接關(guān)閉瀏覽器或標(biāo)簽頁強(qiáng)制退出系統(tǒng)的方法：

// 關(guān)閉時調(diào)用注銷接口
window.onbeforeunload = function() {
 //執(zhí)行注銷ajax調(diào)用,簡單示例
 $.ajax({url:"/logout"});
};

問題

此方式有嚴(yán)重問題，會造成刷新頁面時也被調(diào)用注銷，很多系統(tǒng)必須支持刷新頁面保持會話，如何處理？

沒有辦法的解決方案，但有效：

// 關(guān)閉時調(diào)用注銷接口
window.onbeforeunload = function() {
 //執(zhí)行注銷ajax調(diào)用, 傳入標(biāo)志, 告訴后臺延時注銷
 $.ajax({url:"/logout"},data:{delay:true});
};

后臺注銷接口根據(jù)delay標(biāo)志，設(shè)置定時器，進(jìn)行延時注銷，比如設(shè)置5秒定時器，5秒后，才真正注銷應(yīng)用系統(tǒng)會話。

同時，前端頁面加載后，要立刻調(diào)用一個清除注銷的接口，告訴后臺刪除延時注銷定時器，確保刷新頁面時放棄之前的注銷操作，以保持應(yīng)用會話。

進(jìn)一步問題

后臺定時器設(shè)置多少延時可靠？當(dāng)然希望越短越好，因為可以確保用戶關(guān)閉瀏覽器后，重新打開頁面，不至于重新保持會話，例如后臺設(shè)置5秒定時器，用戶關(guān)閉瀏覽器，重新打開頁面之間間隔只要大于5秒，則會話將不會恢復(fù)，確保重新進(jìn)入登陸頁面。當(dāng)然，如果用戶手速過高，5秒內(nèi)重新打開頁面，則會成功進(jìn)入上一個會話，當(dāng)然這不會造成嚴(yán)重問題，因為惡意用戶不可能非?？斓氖褂糜脩綦x開的電腦并打開頁面。

然后呢？到底設(shè)置多少秒延時為好？這取決于前端代碼加載頁面時調(diào)用清除延時注銷定時器的時機(jī)，關(guān)鍵點(diǎn)是，越早越好。
如何越早呢？當(dāng)然是需要把此調(diào)用放在主頁的盡可能提前的代碼中，比如：

<html manifest="">
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="UTF-8">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="0">
  
  <script type="text/javascript">
   //為了盡快調(diào)用清除延時注銷定時器， 使用原始XMLHttpRequest方式進(jìn)行調(diào)用
   var xhr = new XMLHttpRequest();
   if (xhr) {
    xhr.open("POST", '/clearlogout', true);
    xhr.send();
   }
  </script>

  ......

經(jīng)過上述處理，一般正常的網(wǎng)絡(luò)情況下，刷新頁面操作可確保調(diào)用延時注銷和清除延時注銷之間的時間間隔很短，一般來說， 5秒是較為合理的延時值。
使用此機(jī)制的使用可根據(jù)偏好，比如希望更安全，還是希望更確保刷新體驗，來決定延長還是縮短延時調(diào)用定時器。