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)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>