In Angular, Route Guards are used to control the access of users to certain routes based on defined conditions. They act as gatekeepers, ensuring that users meet specific requirements before navigating to a route.
The Angular Router supports six different guards, which you can use to protect the route.
The Angular CanActivate guard decides if a route can be activated (or the component gets rendered). We use this guard when we want to check a condition, before activating the component or showing it to the user. This allows us to cancel the navigation.
One of the use cases of this guard is to check if the user has logged in to the system. If the user has not logged in, then the guard can redirect them to the login page.
This Angular Guard decides if the user can leave the component (navigate away from the current route). This route is useful when the user might have some pending changes which is not yet saved. The CanDeactivate route allows us to ask for user confirmation before leaving the component. You might ask the user if it’s OK to discard pending changes rather than save them.
This guard delays the activation of the route until some tasks are complete. You can use the guard to pre-fetch the data from the backend API before activating the route.
The CanLoad Guard prevents the loading of the LazyLoaded Module. We generally use this guard when we do not want to unauthorized users to be able even to see the source code of the module.
This guard works similarly to CanActivate guard with one difference. The CanActivate guard prevents a particular route from being accessed. The CanLoad prevents the entire lazy-loaded module from being downloaded, protecting all the routes within that module.
CanActivateChild guard determines whether a child route can be activated. This guard is very similar to CanActivateGuard. We apply this guard to the parent route. The Angular invokes this guard whenever the user tries to navigate to any of its child routes. This allows us to check some conditions and decide whether to proceed with the navigation or cancel it.
Building the Guards is very easy.
1. Build the Guard as a Service
Building the Guard Service is as simple as building any other Angular Service. You need to import the corresponding guard from the Angular Router Library using the Import statement. For Example use CanActivate Guard import the CanActivate in the import the CanActivate in the import statement
import { CanActivate } from '@angular/router';
Next, create the Guard class, which implements the selected guard Interface as shown below.
@Injectable()
export class ProductGuardService implements CanActivate {}
2. Implement the Guard Method
The next step is to create the Guard Method. The name of the Guard method is the same as the Guard it implements. For Example, to implement the CanActivate guard, create a method CanActivate
canActivate(): boolean {
// Check weather the route can be activated;
return true;
// or false if you want to cancel the navigation;
}
The return value from the Guard
The guard method must return either a True or a False value.
If it returns true, the navigation process continues. if it returns false, the navigation process stops, and the user stays put.
The above method returns a True value. The Guard can also return an Observable or a Promise, which eventually returns a True or false. The Angular will keep the user waiting until the guard returns true or false.
The guard can also tell the router to navigate elsewhere, effectively canceling the current navigation.
3. Register the Guard as Service in Module
As mentioned earlier, guards are nothing but services. We need to register them with the providers array of the Angular Module as shown below.
providers: [ProductService,ProductGuardService]
4. Update the Routes
{ path: 'product', component: ProductComponent, canActivate : [ProductGuardService]
}
The above code adds the canActivate guard (ProductGuardService) to the Product route.
When the user navigates to the Product route, Angular calls the canActivate method from the ProductGuardService. If the method returns true, then the ProductComponent is rendered.
You can add more than one guard, as shown below
{ path: 'product',
component: ProductComponent,
canActivate : [ProductGuardService, AnotherProductGuardService ]
}
Order of execution of route guards
A route can have multiple guards, and you can have guards at every level of a routing hierarchy.
The Angular Router cancels the navigation If any of the guards return false.
We create Guard classes as a service. Create a file named product-guard.service.ts in the src/app folder and add the following code
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
@Injectable()
export class ProductGuardService implements CanActivate {
constructor(private _router:Router ) {
}
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
console.log("canActivate"); //return true
//remove comments to return true
alert('You are not allowed to view this page. You are redirected to Home Page');
this._router.navigate(["home"]);
return false;
} }
The canActivate method accepts two arguments. The first argument is an ActivatedRouteSnapshot object, which describes the route that is being navigated to using the properties. The second argument is a RouterStateSnapshot object, which describes the current route through a single property called URL.
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
console.log("canActivate"); //return true
//remove comments to return true
alert('You are not allowed to view this page. You are redirected to Home Page');
//this._router.navigate(["home"]); //navigate to some other route;
return false;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent} from './home.component';
import { ContactComponent} from './contact.component';
import { ProductComponent} from './product.component';
import { ErrorComponent} from './error.component';
import { ProductDetailComponent} from './product-detail.component';
import { ProductService } from './product.service';
import { ProductGuardService } from './product-guard.service';
import { appRoutes } from './app.routes';
@NgModule({
declarations: [ AppComponent,HomeComponent,ContactComponent,
ProductComponent,ErrorComponent,
ProductDetailComponent],
imports: [ BrowserModule, FormsModule,HttpModule,
RouterModule.forRoot(appRoutes)],
providers: [ ProductService,ProductGuardService ],
bootstrap: [ AppComponent]
})
export class AppModule { }
First, Import the Guard Service as shown below
import { ProductGuardService } from './product-guard.service';
Next, Register it using the Providers metadata so that that router can use it. Remember that Guards must be provided at the angular module level
providers: [ProductService,ProductGuardService],
Finally, Update the app.routes class
import { Routes } from '@angular/router';
import { HomeComponent} from './home.component';
import { ContactComponent} from './contact.component';
import { ProductComponent} from './product.component';
import { ErrorComponent} from './error.component';
import { ProductDetailComponent} from './product-detail.component';
import { ProductGuardService } from './product-guard.service';
export const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'product', component: ProductComponent, canActivate :[ProductGuardService] },
{ path: 'product/:id', component: ProductDetailComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: ErrorComponent }
];
The only change we have made is to attach the ProductGuardService to the CanActivate guard
{ path: 'product',
component: ProductComponent,
canActivate : [ProductGuardService] },
The angular Guards are a great tool that helps us to protect the route. They also help us run some logic, get data from the back-end server, etc. You can also create multiple guards against a single route or use the same guard against multiple routes.
.svg)
