js关闭浏览器时退出账号的处理

目录
  • 经典做法
  • 问题
  • 进一步问题
  • 需要注意问题

经典做法

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

// 关闭时调用注销接口
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,内层应用会话依赖后台缓存机制或者数据库

到此这篇关于js关闭浏览器时退出账号的处理的文章就介绍到这了,更多相关js关闭浏览器时退出账号内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue关闭浏览器退出登录的实现示例

    目录 1.beforeunload事件 2.unload事件 3.源码部分   项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是vue3适用,理论上vue2也可以使用,我写的方法是通用的.   这些方法无非都是根据beforeunload和unload这两个事件执行的.   下面我搜了下菜鸟教程和MDN对两个事件的介绍,可自行琢磨. 1.beforeunload事件 1.1.菜鸟教程: 1.2.MDN 2.unload事件 2.1.菜鸟教程 2.2.M

  • js关闭浏览器时退出账号的处理

    目录 经典做法 问题 进一步问题 需要注意问题 经典做法 众所周知,为了账户安全,用户未主动点击注销系统时,直接关闭浏览器或标签页强制退出系统的方法: // 关闭时调用注销接口 window.onbeforeunload = function() { //执行注销ajax调用,简单示例 $.ajax({url:"/logout"}); }; 问题 此方式有严重问题, 会造成刷新页面时也被调用注销, 很多系统必须支持刷新页面保持会话,如何处理? 没有办法的解决方案, 但有效: // 关闭

  • JS关闭窗口时产生的事件及用法示例

    本文实例讲述了JS关闭窗口时产生的事件及用法.分享给大家供大家参考,具体如下: /************ 关闭窗口,提交评价 **************/ window.onbeforeunload = function(){ var pageWidth = Math.max(window.top.document.body.scrollWidth, window.top.document.documentElement.scrollWidth); var pageHeight = Math

  • js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. 复制代码 代码如下: <html> <head /> <body> <script type="text/javascript"> function closeWin(){ window.opener=null; window.open('','_self',''); window.close(); } </script> <a o

  • 关闭浏览器时提示onbeforeunload事件

    onbeforeunload事件 它是这样用的: 复制代码 代码如下: <script language="javascript">      g_blnCheckUnload = true;      function RunOnBeforeUnload() {              if (g_blnCheckUnload) {        window.event.returnValue = 'You will lose any unsaved content'

  • 监控用户是否关闭浏览器的js代码

    test function RunOnBeforeUnload() { window.event.returnValue = '关闭浏览器将退出系统.'; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 效果如下所示: 当wondow.event.returnValue为空的时候,这个选择提示框是不会出现的. 可是问题又来了:假如我希望用户点击"确定"按钮关闭浏览器的时候能够保存用户相关数据.那么我又应该怎么做呢?看来只有用onunload参数了. 将上面的代码修改如下

  • JS区分浏览器页面是刷新还是关闭

    Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以解决,使用window对象的onbeforeunload事件即可,如果产品经理只提出这样的需求,那确实无可厚非,然而其需要的不仅仅是这些... 例如,我们一次项目开发中,产品经理就针对我们的实现提出了"改进方案": 你们这弹出框太丑了,

  • window.close(); 关闭浏览器窗口js代码的总结介绍

    window.close(); 关闭浏览器窗口js代码的总结介绍 序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome, safari Opera Close 2 window.opener=null; window.open('','_self'); window.close();   firefox IE7,Opera, chrome,safari Close 3 window.open('','_self'); win

  • js无提示关闭浏览器窗口的两种方法分析

    1,使用js: 用多种方式打开一个页面,然后用 window.close() 关闭它,在各浏览器下表现有所不同.如在地址栏中直接输入URL 时,Firefox Chrome Safari 下调用 window.close() 关闭页面无效.再如 Ctrl + 点击链接打开的窗口,Firefox 下无法通过调用 window.close() 来关闭. firefox下无法关闭可能原因: 不是JS代码window.close()的问题,而是Firefox的配置问题,解决方法如下: 在Firefox地

  • JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) <script type="text/javascript"> window.onbeforeunload=onclose; function onclose() { if(event.clientX>document.body.clientWidth&&event.clientY<

随机推荐