如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页
最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录,
因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了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(); //不能省,强制跳到登陆页
}else{
window.sessionStorage.removeItem("tempFlag");
}
}
window.onunload = function (){
window.sessionStorage["tempFlag"] = true;
}
window.onbeforeunload = function (){
window.sessionStorage["tempFlag"] = true;
}
目前项目中使用时可行的,不足的地方:一个系统的多个页面同时打开,关掉其中一个页面也会清空cookie,重新登录
谁让项目登录用的是cookie存,如果换成session存登录信息就不一样了
如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页的更多相关文章
- vue项目,子页面刷新404问题
翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...
- vue项目打包之后页面空白解决办法
之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...
- .Net Mvc判断用户是否登陆、未登陆跳回登陆页、三种完美解决方案
开篇先不讲解,如何判断用户是否登陆,我们先来看用户登录的部分代码,账户密码都正确后,先将当前登录的用户名记录下来. public ActionResult ProcessLogin() { try { ...
- 前端Vue项目——首页/课程页面开发及Axios请求
一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...
- vue项目前端限制页面长时间未操作超时退出到登录页
之前项目超时判断是后台根据token判断的,这样判断需要请求接口才能得到返回结果,这样就出现页面没有接口请求时还可以点击,有接口请求时才会退出 现在需要做到的效果是:页面超过30分钟未操作时,无论点击 ...
- vue-cli搭建vue项目(单页面应用)
1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- 前端Vue项目——课程详情页面实现
一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...
- vue项目强制清除页面缓存
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
随机推荐
- BZOJ_2661_[BeiJing wc2012]连连看_费用流
BZOJ_2661_[BeiJing wc2012]连连看_费用流 Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规 ...
- layer的删除询问框的使用
删除是个很需要谨慎的操作 我们需要进行确认 对了删除一般使用ajax操作 因为如果同url请求 处理 再返回 会有空白页 1.js自带的样式 <button type="button& ...
- JDK10安装配置详解
JDK10安装配置详解 1. 下载jdk10 1.1 官网下载jdk7的软件包: 地址:http://www.oracle.com/technetwork/java/javase/dow ...
- java自动化-数据驱动juint演示,上篇
本文旨在帮助读者介绍,一般的全自动化代码接口,并简单介绍如何使用数据驱动来实现简单的自动化 在经过上述几个博客介绍后,相信读者对自动启动执行一个java编译过的class有了一定了解,也完全有能力去执 ...
- 点击a标签实现txt文件另存的效果
亲测成功,使用servlet实现的,核心代码: 前台代码: function downModel(filePath){ var formFile=$("<form>") ...
- Resnet论文翻译
摘要 越深层次的神经网络越难以训练.我们提供了一个残差学习框架,以减轻对网络的训练,这些网络的深度比以前的要大得多.我们明确地将这些层重新规划为通过参考输入层x,学习残差函数,来代替没有参考的学习函数 ...
- hydra暴力破解ssh服务器密码
概述 我都没想到,第一次暴力破解服务器密码.竟然是对自己的单位服务器出手..囧,因为还没来得及找测试部要来服务器登录密码,测试部负责人已经下班走了.后来又联系不上,这要更新代码,怎么办..于是就对测试 ...
- Spark学习之Spark调优与调试(一)
一.使用SparkConf配置Spark 对 Spark 进行性能调优,通常就是修改 Spark 应用的运行时配置选项.Spark 中最主要的配置机制是通过 SparkConf 类对 Spark 进行 ...
- python接口自动化(十三)--cookie绕过验证码登录(详解)
简介 有些登录的接口会有验证码:短信验证码,图形验证码等,这种登录的话验证码参数可以从后台获取的(或者查数据库最直接).获取不到也没关系,可以通过添加cookie的方式绕过验证码.(注意:并不是所有的 ...
- Node 框架接入 ELK 实践总结
本文由云+社区发表 作者:J2X 我们都有过上机器查日志的经历,当集群数量增多的时候,这种原始的操作带来的低效率不仅给我们定位现网问题带来极大的挑战,同时,我们也无法对我们服务框架的各项指标进行有效的 ...