快捷導(dǎo)航

如何利用VUE監(jiān)聽網(wǎng)頁關(guān)閉并執(zhí)行退出操作

更新時間：2023年08月14日 10:34:55 作者：Gua_guagua

這篇文章主要給大家介紹了關(guān)于如何利用VUE監(jiān)聽網(wǎng)頁關(guān)閉并執(zhí)行退出操作的相關(guān)資料,因為項目中需求,瀏覽器關(guān)閉時進(jìn)行一些操作處理,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

最近在項目中遇到了一個需求，需要監(jiān)聽頁面關(guān)閉，在頁面關(guān)閉時彈出提示框，并在離開頁面時觸發(fā)退出操作。因為是用VUE進(jìn)行開發(fā)的，所以先在mounted()中創(chuàng)建頁面關(guān)閉的監(jiān)聽

window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
window.addEventListener("unload", (e) => this.unloadHandler(e));

第一個監(jiān)聽的是頁面關(guān)閉之前，對應(yīng)的方法可以寫做

// 頁面關(guān)閉之前，觸發(fā)提示框
    beforeunloadHandler(e) {
      if (e) {
        e = e || window.event;
        console.log(e);
        if (e) {
          e.returnValue = "關(guān)閉提示";
        }
        return "關(guān)閉提示";
      }
    },

第二個監(jiān)聽的是頁面關(guān)閉的時候，這里面可以調(diào)用退出登錄的方法，但是記得要用同步調(diào)用的方法，axios默認(rèn)的是異步調(diào)用的方法

// 頁面關(guān)閉
    async unloadHandler(e) {
      // 退出登錄
      await this.handleGoLog();
    },

最后記得在destroyed()中，注銷監(jiān)聽

destroyed() {
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
    window.removeEventListener("unload", (e) => this.unloadHandler(e));
  },

補充知識：vue實現(xiàn)關(guān)閉瀏覽器退出登錄功能（區(qū)別關(guān)閉和刷新）

項目場景：

在實現(xiàn)單點登錄時，發(fā)現(xiàn)關(guān)閉瀏覽器后，并不會自動退出登錄

解決方案：在app.vue中書寫如下代碼

? data() {
? ? return {
? ? ? gap_time: 0,
? ? ? beforeUnload_time: 0,
? ? };
? },
? methods: {
? ? // 關(guān)閉窗口之前執(zhí)行
? ? beforeunloadHandler() {
? ? ? this.beforeUnload_time = new Date().getTime();
? ? },
? ? unloadHandler() {
? ? ? this.gap_time = new Date().getTime() - this.beforeUnload_time;
? ? ? //判斷是窗口關(guān)閉還是刷新 毫秒數(shù)判斷 網(wǎng)上大部分寫的是5
? ? ? if (this.gap_time <= 10) {
? ? ? ? logOut() // 退出登錄接口 這里應(yīng)當(dāng)換為個人的登出方法
? ? ? } else {
? ? ? }
? ? },
? },
? destroyed() {
? ? // 移除監(jiān)聽
? ? window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
? ? window.removeEventListener("unload", () => this.unloadHandler());
? },
? mounted() {
? ? // 監(jiān)聽瀏覽器關(guān)閉
? ? window.addEventListener("beforeunload", () => this.beforeunloadHandler());
? ? window.addEventListener("unload", () => this.unloadHandler());
? }

然后，再關(guān)閉瀏覽器后，就會自動調(diào)用我們的退出登錄函數(shù)了。

總結(jié)

到此這篇關(guān)于如何利用VUE監(jiān)聽網(wǎng)頁關(guān)閉并執(zhí)行退出操作的文章就介紹到這了,更多相關(guān)VUE監(jiān)聽網(wǎng)頁關(guān)閉并退出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: