Controlling Access to or from a Route

For example, we may want some routes to only be accessible once the user has logged in or accepted Terms & Conditions. We can use route guards to check these conditions and control access to routes.

Route guards can also control whether a user can leave a certain route. For example, say the user has typed information into a form on the page, but has not submitted the form. If they were to leave the page, they would lose the information. We may want to prompt the user if the user attempts to leave the route without submitting or saving the information.

In order to use route guards, we must register them with the specific routes we want them to run for.

For example, say we have an route that only users that are logged in can navigate to. This page also has forms and we want to make sure the user has submitted unsaved changes before leaving the accounts page.

In our route config we can add our guards to that route:

Let's look at an example activate guard that checks whether the user is logged in:

This class implements the CanActivate interface by implementing the canActivate function.

When returns true, the user can activate the route. When canActivate returns false, the user cannot access the route. In the above example, we allow access when the user is logged in.

canActivate can also be used to notify the user that they can't access that part of the application, or redirect them to the login page.

See Official Definition for CanActivate

We can use that component to determine whether the user can deactivate.

The and canDeactivate functions can either return values of type boolean, or Observable<boolean> (an Observable that resolves to boolean). If you need to do an asynchronous request (like a server request) to determine whether the user can navigate to or away from the route, you can simply return an Observable<boolean>. The router will wait until it is resolved and use that value to determine access.

For example, when the user navigates away you could have a dialog service ask the user to confirm the navigation. The dialog service returns an which resolves to true if the user clicks 'OK', or false if user clicks 'Cancel'.

View Example