How to call canDeactivate in Angular when logout is clicked

Question

In my current logout call, I have something like this:

 getLogoutConfirmation(){
   // get confirmation in modal and perform logout
   // redirect to login page
 }

Issue is, when logout is performed and redirect to login is called, the canDeactivate guard is called on that route, but User has already been logged out.

So how do I call canDeactivate guard before the logout is performed and cancel logout action if user doesn't want to leave.

Thanks.

Answer 1

You should navigate to login page based on getLogoutConfirmation(). if you didn't navigate away then CanDeactivate wouldn't be activated.

Otherwise, Guard canDeactivate is get invoked when navigating away from the current view or route within your angular app. You could check and for getLogoutConfirmation within canDeactivate then decide to continue or cancel navigation. CanDeactivate guard can be used to handle the unsaved change, check permission and clean up the component. This doesn't handle the external navigations such as browser refreshes or closing . You need to use @HostListener('window:beforeunload') for these cases