Securing routes – guards

So far, we’ve seen how to take data through the route to determine the behavior of a page component. However, the routing created in Angular is versatile and also allows you to shape the customer’s journey by conditioning resources based on a business rule.

To illustrate this feature, we are going to create a login screen with a simplified authentication mechanism. To create the components, we are going to use the Angular CLI.

At the command prompt of your operating system, use the following commands:

ng g m login --routing
ng g c login
ng g s login/auth

The first command creates a Login module with the routes file. The second creates the login page component and, finally, we have the service that will manage the interaction with the authentication of our backend.

In the Login module, we will configure the dependencies of the new module:

. . .
@NgModule({
  declarations: [
    LoginComponent...