The aim of this exercise is to implement a login form that controls the routing mechanism: only the user that successfully completes the login process has access to the inner pages.

The web service offers two routes:

• the "login" route, that is the landing point of our web service,ù
• the "main" route, that is the protected route, accessible only after a successful login

The operation is based on two components:

• The "login" component, visible when authorization is pending
• The "main" component, visible after successful login

The directory of the login components hosts also:

• an "auth" service implementing an observable
• the "login" guard that implement a blocking "onActivate" method

At this stage, we have simply created a new project using the Angular CLI, by specifying that we want the routing configured in our template project.

You can load to stackblitz this project, and proceed updating it.

Here we create all the features of our project:

• two components: one for the login form, another for the (empty) main service
• a guard that will open/close the route to the main component
• a service that will operate asynchronously user I/O

You can do this using the Stackblitz IDE

Browse the new template files

The app-routing.module.ts is populated with suitable routes. The guard is added to the main route.

The html of the root app component contains only a title and the router-outlet.

The guard is always false.

Visiting the URL with empty route points to the login page ("login works"), the same with a login route. The URL with the "main" route returns only the title (easy to configure an "Access Denied" component).

The login form is added with a view and no function.

See the form and type login and password, with no effect

Fake authentication (always true) and accessor method (isLogged) added to the authentication service.

The login component invokes the injectable authentication service.

The console traces the call from the login component to the authentication service

The guard uses the isLogged accessor of the injected authenticator to control the access to the main component.

The login handler routes to the user to the main component if the isLogged accessor is true, otherwise dispays a popup alert.

After filling the credentials (any), clicking on the ok button visualizes the "main" component (and hides the login). Change the value of the return value of the fake authenticator to false, and see the popup appear.

The main component contains a logout button, linked to a function that calls a logout function in the authentication service, which sets to false the isLogged variable. The same function routes the user back to the login route.

Also the routing to the main component is moved inside the authentication service.

Clicking the logout button returns to the login screen

Activate the credentials check with a pair user/password (user="user", password="secret"), and bind the variables in the module to variables to application variables with the NgModel directive.

The login mechanism is fully functional. Enjoy...

An event handler, like that in the login component, should operate asynchronously. For this, we introduce an asynchronous subscribe, mediated by an Observable that the authorization server returns to the event handler. So that, when the form waits for the user to digit the credentials, the form function is suspended waiting for the subscribe to unlock.

Nothing... The operation is exactly the same as before, but this is the right way to do that.