最近项目有这么个需求: 要在关闭当前系统的窗口的时候, 退出登录,
因为如果不退出登录可能存在安全风险, 其实我想说, 电脑没事别借给别人活着离开工位记得一定要锁屏, 其实我们设置了 cookie 失效时间的, 过了一段时间会自动清空 cookie.
经过我查资料, 自身尝试网上的各种方法, 发现都有问题.
总结这一路的尝试:
一, 页面加载时只执行 onload , 页面关闭时只执行 onunload, 页面刷新时先执行 onbeforeunload, 然后 onunload, 最后 onload.
经过验证我得出的结论是:
(1) 对于 ie, 谷歌, 360:
// 页面加载时只执行 onload// 页面刷新时, 刷新之前执行 onbeforeunload 事件, 在新页面即将替换旧页面时 onunload 事件, 最后 onload 事件.// 页面关闭时, 先 onbeforeunload 事件, 再 onunload 事件.
(2) 对于火狐:
// 页面刷新时, 只执行 onunload; 页面关闭时, 只执行 onbeforeunload 事件那么回归正题, 到底怎样判断浏览器是关闭还是刷新? 我按照网上的各种说法实验千百遍, 都未成功,
二, 机智的判断页面刷新还是关闭
关键点: 刷新完成之后会执行 onload 方法, 根据 session 存标志变量来清空 cookie
我的思路是: 刷新和关闭, 无论哪个浏览器都会执行 onunload 方法或者 onbeforeunload 方法, 其实我们在这两个方法里是判断不了的, 但是在刷新之后会再一次执行 onload 方法, 所以我在这两个方法里将一个标志位变量放在 session 里. 然后在 onload 方法执行的时候判断 session 里是否有这个变量, 有的话, 说明是刷新, 不然就是关闭.
- import Cookies from 'js-cookie'
- /* 区分关闭和刷新, 关闭退出登录 start*/
- window.onload = function(){
- if(!window.sessionStorage["tempFlag"]){
- Cookies.remove('userId')
- Cookies.remove('userName')
- location.reload(); // 不能省, 强制跳到登 6 页
- }else{
- window.sessionStorage.removeItem("tempFlag");
- }
- }
- window.onunload = function (){
- window.sessionStorage["tempFlag"] = true;
- }
- window.onbeforeunload = function (){
- window.sessionStorage["tempFlag"] = true;
- }
目前项目中使用时可行的, 不足的地方: 一个系统的多个页面同时打开, 关掉其中一个页面也会清空 cookie, 重新登录
谁让项目登录用的是 cookie 存, 如果换成 session 存登录信息就不一样了
来源: https://www.cnblogs.com/chengxs/p/9605702.html