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

摘要:
我根据互联网上的各种说法进行了数千次实验,但都失败了。二、判断是否智能刷新或关闭页面的关键点:刷新完成后,将执行onload方法,并根据会话保存标志变量清除cookie。我的想法是:刷新和关闭,无论哪个浏览器将执行onload方法或onbeforeupload方法,但我们无法在这两种方法中进行判断。然而,onload方法将在刷新后再次执行,因此我在这两个方法中的会话中放置了一个标志位变量。

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

因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了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项目,需求:关闭页面,下次直接跳到登陆页》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇webpack学习笔记--压缩代码ubuntu下crontab编辑方法的设定下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

人人都能学会的webpack5搭建vue3项目(二)配置Vue

webpack5 搭建vue3 项目 (二) 安装vue以及vue-loader yarn add vue@nextyarn add vue-loader@next thread-loader -D 配置webpack.config.js const VueLoaderPlugin = require('vue-loader/dist/plugin...

vue 阿里云上传组件

vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云oss图片 默认读者对vue框架和阿里云oss有一定的了解整体的流程是加载好阿里云sdk -> 初始化上传客户端client -> 等待文件选择...

cookie中数据无法读取,HttpOnly属性

新接手一个项目。项目用户登陆之后用户信息,token是后端保存在前端的cookie里面的。基于此开发。 在开发中,遇到的问题是浏览器手动刷新之后,用户掉线需要重新登陆问题。在此基础上,开始解决bug。 一开始我以为是 vuex 中数据没有持久化保存到 session ,导致用户信息丢失,后来仔细检查之后刷新一瞬间是有用户信息在 session 的。并不是...

document.cookie的使用

设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:document.cookie="userId=828";如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如: document.cookie="userId=828; userName=hulk"; 在cookie的名或值中不...

VUE 使用中踩过的坑

vue如今可谓是一匹黑马,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了,本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结,帮助大家踩坑。如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家! 1.路由变化页面数据不刷新问题 出现这种情况是因为依赖路由的params参数获取写在cr...

vue全局弹窗

效果:在任意页面,不需要引入组件,调用弹窗组件实例方法操作打开关闭  1. 定义 1.1 定义弹窗页面 正常定义即可,需要定义方法show和hide控制组件变量显示及隐藏弹窗。 1.2 弹窗页面同级目录定义得Vue需要得js文件 注意: 搞了单例,调用多少次都是操作一个 import Vue from 'vue' import FullLoginAd fr...