Route Guards
Written By: Avinash Malhotra
Updated on
Route Guards are use to secure routes in Angular Applications. They are like security guard at gate to prevent unauthorized entry. A common example is like a login page where you can not access unless authorized.
A Guard is responsible for route path for successful navigation or redirect.
Angular recently deprecate class based guards and prefer Function based guards.
Types of Route Guards
| Route Guard | Application |
|---|---|
| CanActivate | check if route can be activated |
| CanActivateChild | check if child route can be activated |
| CanMatchFn in Angular 15+ CanLoad (Deprecated) | check if lazy loaded route is Matched |
| CanDeactivate | check if user can navigate away from route. |
CanActivate
CanActivate Guard protect the route path. If its is ok, activate it, else deactivate it. The route path will be activated if its true only.
generate auth guard
auth.guard.ts
The return true in app.routes.ts means the guard is activated. If its false, the guard will not allowed and deactivate route path.
<!--app.routes.ts-->
import { CanActivateFn } from '@angular/router';
export const authGuard: CanActivateFn = (route, state) => {
return true; // guard activated
};
app.routes.ts
import authGuard and use canActivate property in login route path.
<!--app.routes.ts-->
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProductComponent } from './product/product.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';
import { authGuard } from './auth.guard';
export const routes: Routes = [
{ path: '', component:HomeComponent, pathMatch:'full'},
{ path: 'login', component:LoginComponent, canActivate:[authGuard]},
{ path:'product', title:"Product Title" , component:ProductComponent, canActivate:[authGuard], children:[
{ path: 'p1', component:HomeComponent,},
{ path: 'p2', component:LoginComponent,},
]},
{ path:'**', component:ErrorComponent},
];
If return value is false in auth.guard.ts, it will not activated.
CanActivateChild
CanActivateChild Guard protect the route path of child. If its is true, route path of child will be activated, else deactivated.
auth.guard.ts
The return true in app.routes.ts means the guard is activated. If its false, the guard will not allowed and deactivate route path.
<!--app.routes.ts-->
import { CanActivateChildFn, CanActivateChildFn } from '@angular/router';
export const authGuard: CanActivateChildFn = (route, state) => {
return true; // child guard activated
};
app.routes.ts
import authGuard and use canActivate property in product route path.
<!--app.routes.ts-->
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProductComponent } from './product/product.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';
import { authGuard } from './auth.guard';
export const routes: Routes = [
{ path: '', component:HomeComponent, pathMatch:'full'},
{ path: 'login', component:LoginComponent,},
{ path:'product', title:"Product Title", component:ProductComponent, canActivateChild:[authGuard], children:[
{ path: 'p1', component:HomeComponent,},
{ path: 'p2', component:LoginComponent,},
]},
{ path:'**', component:ErrorComponent},
];
If return value is false in auth.guard.ts, child route will not activated.
CanMatchFn
CanMatchFn Guard was introduced in Angular 14 and above. It is upgraded version of CanActivate and CanLoad which is deprecate now.
CanLoad
CanLoad Guard was used till Angular 14.2. Its was used to lazy-load module. But it also had some side effects, like worked usually with CanActivate, have to define both guards, (CanActivate and CanLoad). Also it was complicated to defined multiple route with same path. The Solution is CanMatchFn Guard.
CanMatchFn is used in lazy loading. This will allow the router to load particular lazy loaded route if condition is matched. For example in Authorization.
auth.guard.ts
<!--app.routes.ts-->
import { CanMatchFn } from '@angular/router';
export const authGuard: CanMatchFn = (route, state) => {
return true; // guard match
};
app.routes.ts
import authGuard and use loadComponent property in login route path.
<!--app.routes.ts-->
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProductComponent } from './product/product.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';
import { authGuard } from './auth.guard';
export const routes: Routes = [
{ path: '', component:HomeComponent, pathMatch:'full'},
{ path: 'login', title:"Login", loadComponent: () => import('./login/login.component').then(m => m.LoginComponent)},
{ path:'**', component:ErrorComponent},
];
CanDeactivate
CanDeactivate Guard prevent user from leaving the page if condition is not matched. For example a use cannot leave the page unless the form data is not saved.
create deactivate guard
app.routes.ts
import authGuard and LogOut and use it in login component route path.
<!--app.routes.ts-->
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProductComponent } from './product/product.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';
import { authGuard } from './auth.guard';
import { logOutGuard } from './log-out.guard';
export const routes: Routes = [
{ path: '', component:HomeComponent, pathMatch:'full'},
{ path: 'login', title:"Login", component:'LoginComponent', canDeactivate:[logOutGuard]},
{ path:'**', component:ErrorComponent},
];
log-out.guard.ts
<!--log-out.guard.ts-->
import { CanActivateFn } from '@angular/router';
export const logOutGuard: CanActivateFn = (route, state) => {
return true;
};