Photo by Praveesh Palakeel on Unsplash
How To Use Functional Router Guards in Angular
How To Convert Class Router Guard to Functional And Use In Standalone Components
Today I was talking with my friend Leifer, and he asked me some about Functional Guards in Angular (14/15) with some questions.
How do functional Router Guards work?
Can The Class guards continue working in Standalone Components?
How hard is converting class guards to functional?
How to Inject dependencies for my Functional Guard?
The article answers all these questions, but I kept it short using the same Angular Standalone Components project.
The Scenario
We want to protect the path 'domains'. If one service return false, redirect the users to the 'no-available' page, following the following steps:
Create the component 'no-available'
Create a service to provide the domain status.
Create Class Guard with the service and router injected to redirect the user to the page 'no-available.
Register the Class Guard in my router with Standalone Components
Convert Class Guard to Functional Guards.
Component And Service
If you read my article about standalone components, from Angular 14, we can create standalone components with the flag --standalone
.
ng g c pages/available --standalone
In the component, add the message, and the final code looks this:
import {Component} from '@angular/core';
@Component({
standalone: true,
selector: 'no-available',
template: `<h2>Sorry Domain is not available anymore :(</h2>`
})
export class NoAvailableComponent {
}
Next, register the component in the router:
{
path: 'no-available',
loadComponent: () => import('./pages/noavailable/noavailable.component').then(m => m.NoAvailableComponent)
}
The Service
We need a service to use in the guard; let's create the DomainService with an isAvailable method that returns an observable with a false value. This false value indicates that the domain is not available.
import {Injectable} from '@angular/core';
import {of, tap} from 'rxjs';
@Injectable({providedIn: 'root'})
export class DomainService {
isAvailable() {
return of(false).pipe(
tap((v) =>console.log(v) )
)
}
}
Before Starting with Guards
The Class Guards are services implementing interfaces linked with a few router events, for example:
navigationStart :
CanMatchGuard
CanLoadRoute:
CanLoadGuard
ChildRouteActivation:
CanActivateChildGuard
RouterActivation:
canActivateGuard
If you never play with guards, I recommend the example in the official Angular docs.
Class Guards
The Guards are services implementing interfaces like CanActivate
, and it continues working with Standalone components.
Create the guard DomainGuard
, implements the canActivate
interface, and inject the router
and the domainService
, in the constructor.
The canActivate
use the method isAvailable
from the service when the return is false, then use the router to navigate to the no-available
route.
import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
import {tap} from 'rxjs';
import {DomainService} from './domain.service';
@Injectable({providedIn: 'root'})
export class DomainsGuard implements CanActivate {
constructor(private domainService: DomainService, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.domainService.isAvailable().pipe(
tap(value => !value ? this.router.navigate(['/no-available']) : true)
)
}
}
Using Class Guards With Standalone Components
Our next step is to register the guard with the standalone component. Open the routes.ts
file, and use the canActivate
property in the domain path. Add the DomainGuard
class and test your code.
{
path: 'domains',
canActivate: [DomainsGuard],
loadComponent: () => import('./pages/domains/domains.component').then(m => m.DomainsComponent),
},
Turn to Functional Guards
Ok, our guards work, but how can we turn on o functional guards? The canActivate
property array accepts functions so that we can write an arrow function and return the false into him, something like:
{
path: 'domains',
canActivate: [() => false],
loadComponent: () => import('./pages/domains/domains.component').then(m => m.DomainsComponent),
},
The function () => false
, denies the access to the 'domain' route.
Using Inject()
In Angular 14, we can use the inject function in the constructor function scope to inject external dependencies in our functions.
Our guard functions need to get the router and the domain service to match our guards requirements.
If you want to learn more about the inject
I recommend looking at the Article of Vlad about Inject to answer your questions.
import {inject} from '@angular/core';
import {Router} from '@angular/router';
import {tap} from 'rxjs';
import {DomainService} from '../domain.service';
export const domainGuard = () => {
const router = inject(Router);
const service = inject(DomainService)
return service.isAvailable().pipe(
tap((value) => {
return !value ? router.navigate(['/no-available']) : true
}
))
}
Next, register in the router, as we did before with the class.
{
path: 'domains',
canActivate: [domainGuard],
loadComponent: () => import('./pages/domains/domains.component').then(m => m.DomainsComponent),
},
Yeah!! We have our functional guards with standalone components.
Conclusion
We learn how to use Class Guard in Standalone mode, as well as how to convert it to a functional guard. We also use inject to provide the necessary dependencies for the functional guard.
Have you tried using functional guards? Please share your thoughts in the comments below.
The full code in GitHub