Angular guard is used to protect route

The Angular guard allow to grant or remove access to certain parts of the navigation. Another route guard, the CanDeactivate guard, even allows you to prevent a user from accidentally leaving a component with unsaved changes. Angular guard is very useful. Let’s explore Angular guard

There are the 4 types of routing guards available:

  • CanActivate: Controls if a route can be activated.
  • CanActivateChild: Controls if children of a route can be activated.
  • CanLoad: Controls if a route can even be loaded. This becomes useful for feature modules that are lazy loaded. They won’t even load if the guard returns false.
  • CanDeactivate: Controls if the user can leave a route. Note that this guard doesn’t prevent the user from closing the browser tab or navigating to a different address. It only prevents actions from within the application itself.

Angular Guard: CanActivate

Route guards are most often implemented as classes that implement the needed route guard interface. Let’s see an example with a CanActivate route guard where we ask an auth service if the user is authenticated:

Run below command to generate the guard

ng g guard canActivate

Next, Angular CLI will ask you which type of guard you want to create.

Choose canActivate and press enter will create a file named can-activate.guard.ts

Next, Open above generated file will look like below

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CanActivateGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot){
     
    // your logic here
    return true;
  }
  
}

Notice how we implement the CanActivate interface by declaring a canActivate method. The method optionally has access to the ActivatedRouteSnapshot and the RouterStateSnapshot, in cases where you would need information about the current route.

In the above example canActivate method return true. You can add you login here. If canActivate method return true this means user can access the route, If false then user can’t access the route

Using a route guard

In order to use them, route guards should be provided just like services, so in our case let’s add it to our app module’s providers:

import { AppRoutingModule } from './app-routing.module';
import { CanActivateGuard } from './can-activate.guard.ts';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    AppRoutingModule,
    // ...
  ],
  providers: [ CanActivateGuard ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, you’ll want to add the guard as part of your routing configuration. Here an example with a simple routing module. Open the app-routing.module.ts file and import the Guard

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';

import { CanActivateGuard } from './can-activate.guard.ts';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard',
    component: DashboardComponent,
    canActivate: [ CanActivateGuard ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now /dashboard route is protected

Notice how we provide an array of guards in the route definition. This means that we could specify multiple guards for a single route, and they’ll be evaluated in the order in which they are specified.

Implementing CanLoadand CanActivateChild is done in pretty much the same way.

Angular Guard: CanDeactivate

The CanDeactivate guard has a slight difference in its implementation in that we need to provide the component to be deactivated. This allows us to probe the component in question to see if there’s something like unsaved changes:

Run below command to generate the guard

ng g guard CanDeactivate

Next, Angular CLI will ask you which type of guard you want to create. Choose CanDeactivate and press enter will create a file named can-deactivate.guard.ts

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

import { DashboardComponent } from './dashboard.component';

@Injectable()
export class CanActivateRouteGuard implements CanDeactivate<DashboardComponent> {
  canDeactivate(component: DashboardComponent): boolean {
    if (component.unsavedChanges) {
      return confirm('Are you sure?');
    }
    return true;
  }
}

In the above example, we assume that there’s a member on the dashboard component class called unsavedChanges that becomes true whenever there are unsaved changes. The route won’t be deactivated unless there are either no unsaved changes or the user confirms.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *