js关闭浏览器时退出账号

时间:2022-05-23 hyz1840 人气:0

经典做法

众所周知，为了账户安全，用户未主动点击注销系统时，直接关闭浏览器或标签页强制退出系统的方法：

// 关闭时调用注销接口
window.onbeforeunload = function() {
 //执行注销ajax调用,简单示例
 $.ajax({url:"/logout"});
};

问题

此方式有严重问题，会造成刷新页面时也被调用注销，很多系统必须支持刷新页面保持会话，如何处理？

没有办法的解决方案，但有效：

// 关闭时调用注销接口
window.onbeforeunload = function() {
 //执行注销ajax调用, 传入标志, 告诉后台延时注销
 $.ajax({url:"/logout"},data:{delay:true});
};

后台注销接口根据delay标志，设置定时器，进行延时注销，比如设置5秒定时器，5秒后，才真正注销应用系统会话。

同时，前端页面加载后，要立刻调用一个清除注销的接口，告诉后台删除延时注销定时器，确保刷新页面时放弃之前的注销操作，以保持应用会话。

进一步问题

后台定时器设置多少延时可靠？当然希望越短越好，因为可以确保用户关闭浏览器后，重新打开页面，不至于重新保持会话，例如后台设置5秒定时器，用户关闭浏览器，重新打开页面之间间隔只要大于5秒，则会话将不会恢复，确保重新进入登陆页面。当然，如果用户手速过高，5秒内重新打开页面，则会成功进入上一个会话，当然这不会造成严重问题，因为恶意用户不可能非常快的使用用户离开的电脑并打开页面。

然后呢？到底设置多少秒延时为好？这取决于前端代码加载页面时调用清除延时注销定时器的时机，关键点是，越早越好。
如何越早呢？当然是需要把此调用放在主页的尽可能提前的代码中，比如：

<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">
   //为了尽快调用清除延时注销定时器， 使用原始XMLHttpRequest方式进行调用
   var xhr = new XMLHttpRequest();
   if (xhr) {
    xhr.open("POST", '/clearlogout', true);
    xhr.send();
   }
  </script>

  ......

经过上述处理，一般正常的网络情况下，刷新页面操作可确保调用延时注销和清除延时注销之间的时间间隔很短，一般来说， 5秒是较为合理的延时值。
使用此机制的使用可根据偏好，比如希望更安全，还是希望更确保刷新体验，来决定延长还是缩短延时调用定时器。

需要注意问题

显然，上述机制必须依赖后端双层会话机制，因为前提是必须首先支持刷新页面会话保持，所以表层是web框架本身的session, 内层是应用层会话。表层会话依赖cookie,内层应用会话依赖后台缓存机制或者数据库

加载全部内容