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关闭浏览器时退出账号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript设计模式 – 状态模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 状态模式,结合实例形式分析了javascript状态模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了原生JS实现淡出淡入轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
本文将介绍javascript 文件的同步加载与异步加载实现原理，需要了解的朋友可以了解下2012-12-12
ES6和CommonJS都有自己的一套处理模块化代码的措施，这篇文章主要介绍了ES6与CommonJS中的模块处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
原生javascript实现获取指定元素下所有后代元素的方法
这篇文章主要介绍了原生javascript实现获取指定元素下所有后代元素的方法,在进行web程序设计时是非常实用的技巧,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了JS正则表达式验证端口范围(0-65535),文中给大家提到了Js正则表达式验证IP+端口号的代码，需要的朋友可以参考下2020-01-01
这篇文章主要介绍了微信小程序和百度的语音识别接口详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了JS回调函数,结合实例形式深入分析了js回调函数的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下2019-10-10
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,这篇文章主要给大家介绍了关于如何利用js实时监听input输入框值的变化,需要的朋友可以参考下2024-02-02
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给HTML增加动态功能2018-01-01
最新评论