VUE——监听浏览器关闭及标签页关闭事件
互联网 2022/5/14 6:26:52
前言
需求: 当用户关闭浏览器或者标签页的时候,自动退出系统
beforeunload_event: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event
unload_event: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/unload_event
内容
<templat…
前言
需求: 当用户关闭浏览器或者标签页的时候,自动退出系统
beforeunload_event: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event
unload_event: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/unload_event
内容
<template>
<div id="app">
<transition
mode="out-in"
enter-active-class="fadeInDownBig"
leave-active-class="fadeOutUpBig"
>
<router-view class="animated" />
</transition>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "App",
data() {
return {
beforeunloadTime: 0,
unloadTime: 0
};
},
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
window.addEventListener('unload', e => this.unload(e));
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e));
window.removeEventListener('unload', e => this.unload(e));
},
methods: {
...mapActions(["logout"]),
beforeunloadHandler() {
this.beforeunloadTime = new Date().getTime()
},
unload() {
this.unloadTime = new Date().getTime()
// window.localStorage.setItem('timer', String(this.unloadTime - this.beforeunloadTime))
// 本地通过localStorage中的数据看出,关闭事件间隔小于1,刷新则大于8
if (this.unloadTime - this.beforeunloadTime <= 1) {
// 执行退出登录
this.logout(true)
}
}
}
};
</script>
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[VUE——监听浏览器关闭及标签页关闭事件]http://www.zyiz.net/tech/detail-320830.html
赞(0)
- 2022-05-22vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。
- 2022-05-22JSON.stringify 过滤字段
- 2022-05-22Rxjs TakeUntil 操作符的学习笔记
- 2022-05-22Vue-npm、vue-cli开发环境安装
- 2022-05-22nest.js学习笔记(五) --jwt验证
- 2022-05-22vue - vuex
- 2022-05-22JSP_Homework_10_0518
- 2022-05-22JS高级—17—JSON数据格式、Storage存储、IndexedDB数据库、Cookie存储；
- 2022-05-21JS高级—15—模块化（CommonJS和ESModule）
- 2022-05-21JS基本类型以及判定方法
