Vue js監聽區分窗口關閉事件和刷新事件，並在窗口關閉前發送請求，退出登陸

• 區分窗口關閉和刷新事件
• 火狐瀏覽器兼容
• 關閉發請求，退出登陸操作（使用原生髮同步請求，使用axios發異步會出現時行時不行問題）

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      _beforeUnload_time: 0,
      _gap_time: 0,
      is_fireFox: navigator.userAgent.indexOf("Firefox") > -1,
    };
  },
  methods: {
    beforeunloadHandler(e) {
      this._beforeUnload_time = new Date().getTime();
    },
    unloadHandler(e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;

      //判斷是窗口關閉還是刷新
      localStorage.setItem('time',this._gap_time)
      if (this._gap_time <= 5) {
        // 發送設置同步 (退出登陸的api)
        var xhr = new XMLHttpRequest();
        xhr.open("DELETE", '.' + this.$http.logout, false);
        xhr.setRequestHeader('Authorization','Bearer'+sessionStorage.getItem('token'))
        xhr.send();
      }
    },
  },
},
mounted() {
    window.addEventListener("beforeunload", e => {
        this.beforeunloadHandler(e)
        let userAgent = navigator.userAgent
        let isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) { //判斷是否Opera瀏覽器
            return "Opera"
        };
        if(userAgent.indexOf("Firefox") > -1){
            this.unloadHandler();
        }else if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera){
            e = e ? e : (window.event ? window.event : null);
            var cy = e.clientY || e.target.event.clientY;
            var ak = e.altKey || e.target.event.altKey;
            if (cy < 0 || ak) {
                this.unloadHandler();
            }
        }
    });
    window.addEventListener("unload", async e => {
        this.unloadHandler(e)
    });
  },
  destroyed() {
    window.removeEventListener("beforeunload", e =>
      this.beforeunloadHandler(e)
    );
    window.removeEventListener("unload", e => this.unloadHandler(e));
  },
};
</script>

<style>
</style>