Currently, I am using version 2.6.11 of an application and am encountering challenges with executing a specific action before the user leaves the application or reloads the page.
This involves integrating a CRM system with telephony services. Upon accessing the application, users are required to log in (not within the application itself, but through a hub accessed via SignalR) in order for actions such as making calls, receiving calls, and handling events from the hub to be performed. The issue arises when a user either reloads the page or exits it, necessitating that they be logged out of the hub connection.
In Angular, this was achieved simply by calling:
$scope.$on('$destroy', function () {
// Log user out here
});
However, when attempting to implement a similar solution in Vue.js, utilizing methods like beforeDestroy, keep-alive, destroyed, and others proved unsuccessful. Even trying pure JavaScript approaches such as:
window.onbeforeunload = () => {
// Log user out here
}
... did not resolve the issue at hand.
I am uncertain whether this is due to my own error or if it is simply not yet supported in Vue. Research on the internet has yielded few results pertaining to similar issues. Is there a built-in solution within the framework, or any JavaScript workaround available to execute an action prior to the user exiting or reloading the page?