Sharing Top Content from the Angular-sphere.

Prevent Access to Pages in Ionic with Angular Route Guards

  • 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.
  • Instead, we should use Angular’s route guards to prevent access to certain pages in an Ionic/Angular application.
  • Route guards make the process of protecting certain routes and redirecting the user quite simple, and in my opinion, more manageable than using navigation guards like on individual components.
  • Client-side code is modifiable by the user, so you should never use route guards to protect information that you don’t want the user to see (just as you shouldn’t solely use client-side code to validate/sanitise user entered data).
  • Once you have created the auth guard service (and it does not need to be called that) you will also need to make sure to add it to the for your application just like any other service: – – All that is left to do once you create the route…

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.

Prevent Access to Pages in Ionic with Angular Route Guards