Route Guards

In Angular routing, the user navigates from one view to another using routes. These route paths are configured inside the routing modules and make it accessible to the user to access one route from another as per the code. However, in real-case scenarios, we have so many requirements where we would not want a user to access all the possible route paths inside our application.

Let’s take one example.

Suppose the user is filling out a long application form and midway wants to check some details regarding the form by going back to the intro information. However, if they do that, they will lose the details they have entered in the form. In this case, the application needs to put a guard where it informs the user wanting to go back that you will lose the information entered on this page if you navigate back to another view. “Are you sure you want to leave this page?”, sounds familiar, doesn’t it? This is one good example to understand the use cases of route guards. Route guards not only help us secure the application, but are also useful in monitoring, authorizing, or preventing the user from leaving the route.

Type of route guards

The different route guards ...