vue跳转下个页面关闭当前页面_如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页...
最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录,
因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了一段时间会自动清空cookie。
经过我查资料,自身尝试网上的各种方法,发现都有问题。
总结这一路的尝试:
一、页面加载时只执行 ,页面关闭时只执行onunload,页面刷新时先执行onbeforeunload,然后onunload,最后。
经过验证我得出的结论是:
(1)对于ie,谷歌,360:
//页面加载时只执行//页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后事件。//页面关闭时,先onbeforeunload事件,再onunload事件。
(2)对于火狐:
//页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件那么回归正题,到底怎样判断浏览器是关闭还是刷新?我按照网上的各种说法实验千百遍,都未成功,
二、机智的判断页面刷新还是关闭
关键点:刷新完成之后会执行方法,根据session存标志变量来清空cookie
我的思路是:刷新和关闭,无论哪个浏览器都会执行onunload方法或者onbeforeunload方法,其实我们在这两个方法里是判断不了的,但是在刷新之后会再一次执行方法,所以我在这两个方法里将一个标志位变量放在session里。然后在方法执行的时候判断session里是否有这个变量,有的话,说明是刷新,不然就是关闭。
import Cookies from 'js-cookie'/*区分关闭和刷新,关闭退出登录 start*/window. = 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存登录信息就不一样了
原文出处:https://www.cnblogs.com/chengxs/p/9605702.html
vue跳转下个页面关闭当前页面_如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页...相关推荐
- js 刷新页面但是不闪烁_前端开发还在手动刷新页面?手把手教你搭建一个自动刷新工具...
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
- vue 同时执行两个函数 点击_【第2112期】 import { reactive } from #39;vue#39;
前言 今日早读文章由@Anthony Fu授权分享. @Anthony Fu,是 Vue 的 Core Team 的一员,在 Vue主要负责 @vue/composition-api 这个项目的维护. ...
- chrome关闭自动升级_为什么Chrome的自动完成功能不安全以及如何将其关闭
chrome关闭自动升级 Chrome has yet to fix a well-known vulnerability first publicized way back in 2013. Chr ...
- vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 ...
- vue项目某个APP页面实现手机物理按键返回、路由拦截、localStorage存取参数
vue项目某个APP页面实现手机物理按键返回.路由拦截.localStorage存取参数 最近做个功能:在web系统里面嵌套两个app页面,当然APP页面在web系统上没有路由跳转,而是从另外系统扫码 ...
- 前端Vue项目——课程详情页面实现
一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...
- Spark Core项目实战(3) | 页面单跳转化率统计
大家好,我是不温卜火,是一名计算机学院大数据专业大二的学生,昵称来源于成语-不温不火,本意是希望自己性情温和.作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己 ...
- vue项目keepAlive保持页面状态(详情页返回列表页不刷新)
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
- vue 删除页面缓存_vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
最新文章
- 《统一沟通-微软-实战》-6-部署-2-中介服务器-1-定义中介服务器
- Qute模板与Quarkus
- boost::regex模块用于测试特定于语言环境的表达式的帮助程序类
- jquery 学习之二 属性---文本 值
- 浅析Serverless
- truncate delete 与 drop的区别
- Linux进程间通信[转]
- php swoole能干,PHP swoole怎么用
- mysql函数做条件_MySQL语句优化(三):避免条件字段做函数操作
- LeetCode90. 子集 II(回溯)
- .npy文件_python——文件读写
- 10个免费网页统计与分析工具
- 从零开始学习node.js
- L1-058 6翻了 (15 分)循环的妙用
- C++string字符串初始化与使用
- 注册申请PayPal支付账户
- Python 中的多进程(进程之间的通信)
- tibco文档下载地址
- 云服务器能干什么用?云服务器使用场景列举
- 不是所有电子签名都具备法律效力
热门文章
- android对错图标,Android Studio Gradle图标错误,清单合并
- 第三方库pod错误:ld: library not found for -lXXX
- 01 离散时间信号的时域表示
- 项目代码迁移(使用git)
- .NET、.NET框架、ASP.NET和C#的关系(完成)
- 树莓派(raspberry pi)系统开发
- HOLOLENS不适合加天空盒
- ZOJ3545——AC自动机+状态dp
- 网页端对接linux发起cc,(cc)实现Linux系统调用劫持
- Python版归并排序算法(附Python程序__name__属性用法演示视频)