标签：VUE 浏览器 unload window beforeunloadTime unloadTime 关闭 beforeunload event

前言

需求: 当用户关闭浏览器或者标签页的时候,自动退出系统
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>

标签：VUE,浏览器,unload,window,beforeunloadTime,unloadTime,关闭,beforeunload,event
来源： https://www.cnblogs.com/wangyang0210/p/16268884.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。