How to call an Angular method when browser closes

Question

I'm relatively new in AngularJS and I have been asked to modify our application so that when the user closes the browser, we also log them out of Auth0 service.

I have the code below but I can't get it to fire. Kindly help.

$rootScope.$on("$destroy", function() {
    lockService.logout();
});

lockService.logout() holds the functionality that successfully logs out the user when they click logout button, including the Auth0 signout function.

Somewhere I read that I can use the $on.$destroy of the main Controller but I am not sure how to do this. The above code is in fact inside the mainController function but it still doesn't work.

This is where I found my answer: https://stackoverflow.com/a/36444134/1168597

can you try it with `$window.onbeforeunload` instead of `.$on('$destroy')` — Aleksey Solovey, Aug 06 '18 at 14:31
yep, you can $window.onbeforeunload, then you will find out that angular can not send sync http requests and then later you will understand that requirements you were given is impossible to implement in reliable way. — Petr Averyanov, Aug 06 '18 at 14:42
@AlekseySolovey I have tried that. The problem with that is, it logs out even when you navigate between pages as the `$window.onbeforeunload` hits every time you navigate away, even within the app itself. So it's not a solution. — RealSollyM, Aug 06 '18 at 14:50
@SollyM it **shouldn't**. My guess is that your app reloads pages after navigation. AngularJS is for SPAs and should not refresh. `ngRoute` or `ui.router` will handle it correctly. Here is a small demo: [Plunker](https://plnkr.co/edit/2A6C4fRdxsqUuWqO8EP6?p=preview) — Aleksey Solovey, Aug 06 '18 at 15:10
@AlekseySolovey - Although this doesn't resolve my problem 100%, it has given me a direction and a temporary solution. The problem above is that, even when you refresh the page, the method executes. I only need to execute a piece of code when one closes the window. — RealSollyM, Aug 08 '18 at 13:49
@SollyM I'm not familiar with `onbeforeunload` that much, but maybe you can combine events and execute some code if another one fires — Aleksey Solovey, Aug 08 '18 at 13:58

score 0 · Answer 1 · answered Aug 06 '18 at 18:07

0

You can add a directive like this to your body element.

<body body-unload></body>

app.directive('bodyUnload', [
    function () {
        return {
            restrict: 'A',
            replace: false,
            link: function (scope, element) {
                function cleanupApp(){
                 // do cleanup here
                }
                element[0].onbeforeunload = function() {
                        cleanupApp();
                };
            }
        };
    }
]);

answered Aug 06 '18 at 18:07

Ken Johnson

1
1

Hi. I tried this. I created a file called `app.directive.js` in the `app\shared` then used a `script` tag to link to the file and then added the `body-unload` directive to the `body` tag. In the `cleanupApp()` method I added an `alert` and `cookie.delete` but none of those execute. Did I do anything wrong? – RealSollyM Aug 07 '18 at 10:00

score 0 · Accepted Answer · answered Aug 13 '18 at 08:35

I have found a much cleaner and more effective approach.

$rootScope.$on('$locationChangeStart', function () {

    if (!($window.performance.navigation.type === 1) && lockService.isAuthenticated()) {
        $rootScope.logout();
    }

});

So here if window.performance.navigation.type is 1, it means the page was refresh-ed. What I do then is if it is not refreshed AND my lockService.isAuthenticated() returns true, I logout the user.

How to call an Angular method when browser closes

2 Answers2