如何在用户重新加载页面或退出我的 vuejs 应用程序之前执行操作

Question

所以，我使用的是 2.6.11 版本，在用户退出我的应用程序或重新加载页面之前，我在执行操作时遇到了一些困难。

我正在进行 CRM 与电话的集成。当用户访问我的应用程序时，他需要登录（不是在我的应用程序中，而是在我使用 SignalR 访问的集线器中），这样我就可以执行一些操作，例如拨打电话、接听电话和处理我收到的事件从集线器接收。问题是：如果用户重新加载页面或退出页面，我需要将他从集线器连接中注销。

当使用 angular 时，解决方案非常简单，我只需要调用：

$scope.$on('$destroy', function () {
    // Log user out here
});

...但我不能用 vue 做到这一点。我一直在尝试使用 beforeDestroy、keep-alive、destroyed 和其他方法，但其中 none 正在帮助我实现目标。我试过纯 javascript 喜欢：

window.onbeforeunload = () => { 
    // Log user out here
}

...但出于某种原因，即使这样也无法帮助我解决问题。

真不知道是不是我的错误，还是vue上还没有实现，网上也没有发现类似的问题。框架内是否有任何解决方案，或者我可以用 javascript 做些什么来在用户退出或重新加载页面之前执行操作？

Answer 1

找到了解决我的问题的方法。我将 onbeforeunload 事件放在了错误的位置。而且，就我而言，onbeforeunload 不是答案。要注销用户，我只需要调用：

import { EventBus } from "@/services/eventBus"

window.onunload = function () {
    EventBus.$emit("onunload")
}

... 在 main.js 中。然后，我能够监听此事件并调用 .vue 文件中的函数：

mounted() {
    EventBus.$on("onunload", this.logout);
},

How to perform an action before user reload page or exit my vuejs application