Authorized access to routes using route guards

Not all routes in your Angular app should be accessible to everyone in the world. In this recipe, we’ll learn how to create route guards in Angular to prevent unauthorized access to routes.

Getting ready

The app that we are going to work with resides in start/apps/chapter07/ng-route-guards inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-route-guards
   

   This should open the app in a new browser tab. You should see the following:

   

   Figure 7.12: ng-route-guards app running on http://localhost:4200

Now that we have the app running locally, let’s see the steps of the recipe in the next section.

How to do it…

We have an app with a couple of routes already set up. You can log in as either an employee...