最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录,

因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了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里是否有这个变量,有的话,说明是刷新,不然就是关闭。

  1. import Cookies from 'js-cookie'
  2.  
  3. /*区分关闭和刷新,关闭退出登录 start*/
  4. window.onload = function(){
  5. if(!window.sessionStorage["tempFlag"]){
  6. Cookies.remove('userId')
  7. Cookies.remove('userName')
  8. location.reload(); //不能省,强制跳到登陆页
  9. }else{
  10. window.sessionStorage.removeItem("tempFlag");
  11. }
  12. }
  13. window.onunload = function (){
  14. window.sessionStorage["tempFlag"] = true;
  15. }
  16. window.onbeforeunload = function (){
  17. window.sessionStorage["tempFlag"] = true;
  18. }

目前项目中使用时可行的,不足的地方:一个系统的多个页面同时打开,关掉其中一个页面也会清空cookie,重新登录

谁让项目登录用的是cookie存,如果换成session存登录信息就不一样了

如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页的更多相关文章

  1. vue项目,子页面刷新404问题

    翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...

  2. vue项目打包之后页面空白解决办法

    之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...

  3. .Net Mvc判断用户是否登陆、未登陆跳回登陆页、三种完美解决方案

    开篇先不讲解,如何判断用户是否登陆,我们先来看用户登录的部分代码,账户密码都正确后,先将当前登录的用户名记录下来. public ActionResult ProcessLogin() { try { ...

  4. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  5. vue项目前端限制页面长时间未操作超时退出到登录页

    之前项目超时判断是后台根据token判断的,这样判断需要请求接口才能得到返回结果,这样就出现页面没有接口请求时还可以点击,有接口请求时才会退出 现在需要做到的效果是:页面超过30分钟未操作时,无论点击 ...

  6. vue-cli搭建vue项目(单页面应用)

    1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...

  7. vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

    watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...

  8. 前端Vue项目——课程详情页面实现

    一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...

  9. vue项目强制清除页面缓存

    异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...

随机推荐

  1. springboot中使用自定义两级缓存

    工作中用到了springboot的缓存,使用起来挺方便的,直接引入redis或者ehcache这些缓存依赖包和相关缓存的starter依赖包,然后在启动类中加入@EnableCaching注解,然后在 ...

  2. java中读取配置文件ResourceBundle和Properties两种方式比较

    今天在开发的时候,需要把一些信息放到配置文件中,方便后续的修改,注意到用的是ResourceBundle读取配置文件的方式,记得之前也见过使用Properties的方式,就比较好奇这两种方式的区别,网 ...

  3. bzoj 3551 kruskal重构树dfs序上的主席树

    强制在线 kruskal重构树,每两点间的最大边权即为其lca的点权. 倍增找,dfs序对应区间搞主席树 #include<cstdio> #include<cstring> ...

  4. BZOJ_2661_[BeiJing wc2012]连连看_费用流

    BZOJ_2661_[BeiJing wc2012]连连看_费用流 Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规 ...

  5. BZOJ_2073_[POI2004]PRZ_状压DP

    BZOJ_2073_[POI2004]PRZ_状压DP 题意: 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上 ...

  6. XML错误信息Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-4.0.xsd). For more information, right click on the message in the Problems View ...

    错误信息:Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-4.0.x ...

  7. Python实现微信消息防撤回

    微信(WeChat)是腾讯公司于2011年1月21日推出的一款社交软件,8年时间微信做到日活10亿,日消息量450亿.在此期间微信也推出了不少的功能如:“摇一摇”.“漂流瓶”.“朋友圈”.“附近的人” ...

  8. 【转】AB实验设计思路及实验落地

    这篇文章会讨论: 在什么情况下需要做 AB 实验 从产品/交互角度,如何设计一个实验 前端工程师如何打点 如何统计数据,并保证数据准确可信 如何分析实验数据,有哪些数据需要重点关注 附:如何搭建前端实 ...

  9. Spark学习之Spark调优与调试(二)

    下面来看看更复杂的情况,比如,当调度器进行流水线执行(pipelining),或把多个 RDD 合并到一个步骤中时.当RDD 不需要混洗数据就可以从父节点计算出来时,调度器就会自动进行流水线执行.上一 ...

  10. Python爬虫入门教程 57-100 python爬虫高级技术之验证码篇3-滑动验证码识别技术

    滑动验证码介绍 本篇博客涉及到的验证码为滑动验证码,不同于极验证,本验证码难度略低,需要的将滑块拖动到矩形区域右侧即可完成. 这类验证码不常见了,官方介绍地址为:https://promotion.a ...