Overview Of Guards In Angular

Guards in Angular are nothing but the functionality, logic, and code which are executed before the route is loaded or the ones leaving the route.

Different types of guards,

1. CanActivate guard (e.g. it checks route access).
2. CanActivateChild guard (checks child route access).
3. CanDeactivate guard (prompt for unsaved changes).
4. Resolve guard (pre-fetching route data).
5. CanLoad guard (check before loading feature module assets).

CanActivate Guard

1. Create a new service say AuthenticationGuard.service.ts as below. If the AuthenticationGuard returns false then the user is not able to navigate to Home route in below example. And further not able to see the welcome and Edit child routes.
   

   import { Injectable } from "@angular/core";
   import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
   
   @Injectable()
   export class AuthenticationGuard implements CanActivate  {
   
   constructor(private authService: AuthService){}
   
   
       canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean>|Promise<boolean>|boolean {
   
           return this.authService.isAuthenticated();
       //Logic of authenticating user by calling some API service.
       // For e.g. Here Authservice has a isAuthenticated() method which further
       // Check user is valid or not.
       }
   }

2. In Module, while creating routes set canActivate as below,
   

   const APP_ROUTES : Routes = [
           {path:'', component: HomeComponent, canActivate:[ AuthenticationGuard], children:[
           {path:'', component: WelcomeComponent},
           {path:'edit', component: EditComponent, }],
           {path:':id/Logout, component: LogoutComponent},
     {path:'Login’, component: LoginComponent }
   
       ]},
   ]
   
   @NgModule({
       imports:[
           RouterModule.forChild(APP_ROUTES)
       ],
       providers:[
           AuthenticationGuard
       ],
       exports:[
           RouterModule
       ]
   })
   export class MyRoutingModule{
   
   }

CanActivateChild Guard

1. This guard checks the access on child routes. Take the above example. If the AuthenticationGuard returns false then the user is able to navigate the Home route in below example. And will be able to see its child routes. But not able to move inside welcome or Edit child routes if it returns false.
   

   import { Injectable } from "@angular/core";
   import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
   
   @Injectable()
   export class AuthenticationGuard implements CanActivateChild  {
   
   constructor(private authService: AuthService){}
   
   
       CanActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean>|Promise<boolean>|boolean {
   
           return this.authService.isAuthenticated();
       //Logic of authenticating user by calling some API service.
       // For e.g. Here Authservice has a isAuthenticated() method which further
       // Check user is valid or not.
       }
   }

2. In Module, while creating routes set canActivateChild as below,
   

   const APP_ROUTES : Routes = [
           {path:'', component: HomeComponent, canActivateChild:[ AuthenticationGuard], children:[
           {path:'', component: WelcomeComponent},
           {path:'edit', component: EditComponent, }],
           {path:':id/Logout, component: LogoutComponent},
     {path:'Login’, component: LoginComponent }
   
       ]},
   ]
   
   @NgModule({
       imports:[
           RouterModule.forChild(APP_ROUTES)
       ],
       providers:[
           AuthenticationGuard
       ],
       exports:[
           RouterModule
       ]
   })
   export class MyRoutingModule{
   
   }

CanDeactivate Guard

This guard is used when a user makes some changes in a form and by mistake clicks on a menu to navigate to some other route. In this case, it can be implemented to prompt a user that there are some unsaved changes, do you want to navigate away from this page or not.

Here is implementation,

1. Firstly create a CanDeactivateGuard.service.ts. In this firstly create an interface i.e. CanComponentDeactivate. After that, create CanDeactivateGuard service which further implements CanDeactivate<CanComponentDeactivate> as below,
   

   import { Observable } from "rxjs/Observable";
   import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
   
   export interface CanComponentDeactivate {
   
       canDeactivate:() => Observable<boolean>| Promise<boolean> | boolean;
   }
   
   export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate>{
   
       canDeactivate(component: CanComponentDeactivate,
           currentRoute : ActivatedRouteSnapshot,
           state : RouterStateSnapshot,
           next? : RouterStateSnapshot) : Observable<boolean>| Promise<boolean> | boolean{
   
               return component.canDeactivate();
       }
   }

2. Now, in a component where we want prompt functionality implement CanComponentDeactivate interface. For e.g. below EditDataComponent is doing,
   

   import { Component, OnInit } from '@angular/core';
   import { MyService } from '../my.service';
   import { ActivatedRoute, Params } from "@angular/router";
   import { CanComponentDeactivate } from "../../app-candeactivate-guard.service";
   import { Observable } from "rxjs/Observable";
   @Component({
     selector: 'app-edit',
     templateUrl: './edit-data.component.html',
     styleUrls: ['./edit-data.component.css']
   })
   export class EditDataComponent implements OnInit,CanComponentDeactivate {
     name = '';
     status = '';
     originalName = '';
     originalStatus = '';
     changed = false;
     constructor(private myservice: MyService, private activatedRoute: ActivatedRoute) { }
     ngOnInit() {
       //call some service to set the original name and staus
       this.originalName = 'Name from service'; // this.myservice.GetName();
       this.originalStatus = 'Status from service';// this.myservice.GetSatuts();
       this.name = this.originalName;
       this.status = this.originalStatus;
     }
     onUpdateServer() {
       this.myService.updateData({name: this.name, status: this.status});
       this.changed =true;
     }
     canDeactivate() :Observable<boolean>| Promise<boolean> | boolean {
       if((this.name!== this.originalName || this.status !== this.originalStatus) && !this.changed){
           return confirm("Do you want to discard changes!")
         }
       else{
          return true;
       }
     }
   }

3. Now, register this guard in routes as below.
   

   const APP_ROUTES: Routes = [
     {path:'home', component: HomeComponent},
     {path:'books',
           canActivateChild :[AuthGuard],
            component: booksComponent, children: [
        {path:':id', component: bookComponent },
        {path:':id/edit', component: EditDataComponent, canDeactivate: [CanDeactivateGuard]},
     ]},
     {path:'', component: HomeComponent, pathMatch:'full' },
     {path:'not-found', component: ErrorPageComponent, data: {message:'Page Not found'} },
     {path:'**', redirectTo: '/not-found' },
   ];
   
   @NgModule({
       imports:[RouterModule.forRoot(APP_ROUTES)],
       exports:[RouterModule]
   })
   export class AppRoutingModule{
   
   }