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
],
imports: [
CommonModule,
LoginRoutingModule,
ReactiveFormsModule
]
})
export class LoginModule { }
Next, let’s add the new module to AppRoutingModule:
const routes: Routes = [
{ path: ”, pathMatch: ‘full’, redirectTo: ‘home’ },
{
path: ‘home’,
loadChildren: () =>
import(‘./home/home.module’).then((file) => file.HomeModule),
},
{
path: ‘login’,
loadChildren: () =>
import(‘./login/login.module’).then((file) => file.LoginModule),
},
{ path: ‘error’, component: ErrorPageComponent },
{ path: ‘**’, redirectTo: ‘/error’ },
];
In the LoginRoutingModule module, we will configure the component we created:
const routes: Routes = [
{ path: ”, component: LoginComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule { }
To simplify the handling of the request and response payload of our authentication service, let’s create an interface with the new types:
export interface LoginForm {
username: string;
password: string;
}
export interface Token {
access_token: string;
}
The LoginForm interface corresponds to the data that we are going to send and the Token interface is the API return, which is basically the access token that the application will send the client’s JWT.
With the interface created, let’s create a service that will orchestrate the interaction with the backend:
export class AuthService {
private httpClient = inject(HttpClient);
private url = ‘http://localhost:3000/auth/login’;
private token?: Token;
login(loginForm: Partial): Observable {
return this.httpClient
.post(this.url, loginForm)
.pipe(tap((token) => (this.token = token)));
}
get isLogged() {
return this.token ?
true : false;
}
logout() {
this.token = undefined;
}
}
In this service, we make the request to the backend using the HttpClient service (for more details, read Chapter 5, Angular Services and the Singleton Pattern). We are using the RxJS tap operator so that as soon as the request is successful, it saves the token in a service variable.
It is through this variable that we create the isLogged property, which will be important for controlling the route. With the services created, we can develop the Login page template:
Login
Username Password Login
When creating Login pages, an important point is to correctly use the HTML input field types for the correct UX treatment and accessibility.
With the template completed, let’s develop the component:
export class LoginComponent {
private formBuilder = inject(NonNullableFormBuilder);
private loginService = inject(AuthService);
private router = inject(Router);
public loginForm = this.formBuilder.group({
username: [”, [Validators.required]],
password: [”, [Validators.required]],
});
login() {
const loginValue = { …this.loginForm.value };
this.loginService.login(loginValue).subscribe({
next: (_) => {
this.router.navigate([‘/home’]);
},
error: (e) => alert(‘User not Found’),
});
}
}
In this example, we are creating the reactive form, and in the login method, we are using the AuthService service. Run the project and, in url /login, we will have our login screen. To use the screen, we have the username mario and password 1234:
Figure 7.4 – Login page
To create the logout treatment, we will create a link in the HomeComponent component menu and create the logout method in it, redirecting to the login page: Logout
export class HomeComponent {
private authService = inject(AuthService);
private router = inject(Router);
logout() {
this.authService.logout();
this.router.navigate([‘./login’]);
}
}
With the page created, now we need a way to guarantee access to the diary only if the user is logged in. For this type of route checking, we should use Angular’s route guard feature.
To create it, we can count on the help of the Angular CLI; in the command line, use the following command:
ng g guard login/auth
A selection list will be presented; choose CanActivate. In the new file, let’s create the following function:
export const authGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);
if (authService.isLogged) {
return true;
} else {
return router.parseUrl(‘/login’);
}
};
Since version 14, the recommended way to create route guards is through functions and not classes.
We are creating the authGuard function that has the CanActivateFn interface, which is a function that expects a Boolean return or an object of the UrlTree class to redirect the user to the indicated route.
In the function, we first inject the AuthService and Router services; notice that the inject function in this context is mandatory because, in a function, we don’t have a constructor to inject the services.
With the services configured, we make an if statement evaluating the isLogged service property. We return true if the user is logged in, allowing the route to be navigated. Otherwise, we return an object of the UrlTree class with the login page route.
To use the guard, let’s change DiaryRoutingModule:
const routes: Routes = [
{
path: ”,
component: DiaryComponent,
title: ‘Diary’,
canActivate: [authGuard],
},
{
path: ‘new-template’,
component: NewEntryFormTemplateComponent,
},
{
path: ‘entry’,
component: NewEntryFormReactiveComponent,
title: ‘Entry Form’,
},
{
path: ‘entry/:id’,
component: NewEntryFormReactiveComponent,
title: ‘Edit Entry’,
},
];
By using the canActivate attribute, we can pass one or more route guards.
Running the application, we can see that we are directed to the login page. But if we directly call the /home/diary/entry route, we realize that it is not protected. This happens because we set guard only on the /diary route.
To fix this, we can set the canActivate attribute on all routes, but a more effective way would be to change the type of the route to CanActivateChild.
Going back to the route function, let’s change its type:
export const authGuard: CanActivateChildFn = (route, state) => {
};
We now need to refactor DiaryRoutingModule:
const routes: Routes = [
{
path: ”,
children: [
{
path: ”,
component: DiaryComponent,
title: ‘Diary’,
},
{
path: ‘new-template’,
component: NewEntryFormTemplateComponent,
},
{
path: ‘entry’,
component: NewEntryFormReactiveComponent,
title: ‘Entry Form’,
},
{
path: ‘entry/:id’,
component: NewEntryFormReactiveComponent,
title: ‘Edit Entry’,
},
],
canActivateChild: [authGuard],
},
];
Here, we are using a component-less route pattern; basically, we create a route without a component and put all the routes as children of it.
Then, we use the canActivateChild attribute to call the route’s guard, so we don’t need to repeat all the routes in this module.
The route guard feature can do more for your application than flow control; we can improve its perceived performance, as we’ll see in the next section.