In this tutorial, we are going to cover how to use route guards with Angular routing to prevent access to certain routes if certain conditions have not been met.
In a previous tutorial, I covered how we would implement Angular routing in an Ionic 4.x application. When Ionic 4 is released, there will be more of a focus on using the baked in Angular routing, rather than Ionic’s own push/pop style routing (this style of navigation will still be available, though).
In this tutorial, we are going to cover how to use route guards with Angular routing to prevent access to certain routes if certain conditions have not been met. A common example of this is preventing access to certain pages if the user is not logged in, and that is what we will be focusing on.
In the past, you may have used the Ionic navigation guards like to determine whether or not a user could navigate to a page. However, I don’t believe these functions will be available in Ionic 4.x (I’m not 100% certain on this). Instead, we should use Angular’s route guards to prevent access to certain pages in an Ionic/Angular application.
The basic idea behind a route guard is that you attach a service which acts as the “route guard” to a particular route. That service has a method which will return either or depending on whether the user should be allowed to go to that route or not. If the method returns false, then the user will not be able to access the route.