How to use CanActivate and CanDeAactivate in Angular

---

CanActivate

Guards are used in angular to protect any routes. If the guard returns true, then the navigation is allowed to proceed further else the navigation will be blocked. To make the service as a guard, we need to implement canActivate interface.

Let's start with an example program. First create an angular application using

ng new angular-app

Then enter into the project using

cd angular-app

Create a service named UserService to get and set the login status

ng g s services/user

1

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

2

​

3

@Injectable({

4

  providedIn: 'root'

5

})

6

export class UserService {

7

​

8

  private isLoggedIn: boolean;

9

  constructor() {

10

    this.isLoggedIn = false;

11

  }

12

​

13

  getUserLoginStatus(): boolean {

14

    return this.isLoggedIn;

15

  }

16

​

17

  setUserLoginStatus(status: boolean) {

18

    this.isLoggedIn = status;

19

  }

20

}

21

​

22

​

We create a variable named isLoggedIn and initially set it to false in the constructor. We create a function named 'getUserLoginStatus' which returns 'isLoggedIn' variable and 'setUserLoginStatus' is used to set the value to isLoggedIn variable.

Now lets create a gaurd using the below command in 'gaurds' folder

ng g g guards/auth

Select canActivate option by clicking space and press enter. Modify the code as below.

1

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

2

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

3

import { Observable } from 'rxjs';

4

import { UserService } from '../services/user.service';

5

​

6

@Injectable({

7

  providedIn: 'root'

8

})

9

export class AuthGuard implements CanActivate {

10

  constructor(private userService: UserService) { }

11

  canActivate(

12

    next: ActivatedRouteSnapshot,

13

    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

14

    return this.userService.getUserLoginStatus();

15

  }

16

}

17

​

18

Here implementing the CanActivate interface will create a canActivate() function with 2 parameters ActivatedRouteSnapshot and RouterStateSnapshot and return a boolean value. The return value can be an Observable or a Promise returning boolean value or the exact boolean value. Here we have imported the UserService and injected it to the constructor. In canActivate function we return the value returned by getUserLoginStatus() function of UserService. This would return true or false based on the isLoggedIn variable's value.

In, app.component.ts file, we shall modify the code as

1

import { Component, OnInit } from '@angular/core';

2

import { UserService } from './services/user.service';

3

@Component({

4

  selector: 'app-root',

5

  templateUrl: './app.component.html',

6

  styleUrls: ['./app.component.css'],

7

})

8

export class AppComponent implements OnInit {

9

​

10

  isLoggedIn: boolean;

11

  title = 'Welcome to Readers Buddy canActivate tutorial';

12

  constructor(private userService: UserService) {

13

  }

14

  ngOnInit(): void {

15

    this.isLoggedIn = this.userService.getUserLoginStatus();

16

  }

17

​

18

  toggleLogin() {

19

    this.isLoggedIn = !this.isLoggedIn;

20

    this.userService.setUserLoginStatus(this.isLoggedIn);

21

  }

22

}

23

Here we inject the UserService to the constructor to get and set the value of isLoggedIn variable. Lets create a variable 'isLoggedIn' in app.component.ts to get and set its status from getUserLoginStatus() of UserService in ngOnInit() function. We have a function named toggleLogin(), to toggle the variable isLoggedIn and also set isLoggedIn variable value in UserService using setUserLoginStatus() function.

In app.component.html file modify the code as below

1

<button (click)="toggleLogin()">

2

    {{ isLoggedIn === true ? "Allow":"Block"}}

3

</button><br />

4

<a [routerLink]="['/home']">Home</a> 

5

​

6

<router-outlet></router-outlet>

7

Here we have a button, whose label value changes based on isLoggedIn variable value. This is done by calling toggleLogin() function on the button click. We also have a route, so simply create a HomeComponent using the command

ng g c home

Let's set the route and the guard to the component in app-routing.module.ts file

1

import { NgModule } from '@angular/core';

2

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

3

import { AuthGuard } from './guards/auth.guard';

4

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

5

​

6

const routes: Routes = [

7

  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },

8

];

9

​

10

@NgModule({

11

  imports: [RouterModule.forRoot(routes)],

12

  exports: [RouterModule]

13

})

14

export class AppRoutingModule { }

15

Run you application using

ng serve --o

So when the button text is 'Allow' then it would allow to route and if its in blocked state, then it will not allow to navigate to HomeComponent.

CanDeAactivate

CanDeAactivate is a gaurd, that is used to decided whether the route can be deactivated. If it returns true then it would allow us to navigate else it will block the navigation. Let's create a DeActivate gaurd in gaurds folder with filename 'auth-deactivate.guard' and add code as below.

1

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

2

import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

3

import { Observable } from 'rxjs';

4

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

5

@Injectable({

6

  providedIn: 'root'

7

})

8

export class CanDeactivateGuard implements CanDeactivate<HomeComponent> {

9

  canDeactivate(component: HomeComponent, currentRoute: ActivatedRouteSnapshot,

10

    currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {

11

    return component.canDeactivate();

12

  }

13

}

14

In the above code, we import the HomeComponent and set the CanDeAactivate type to Homecomponent. The canDeactivate() function in addition takes a component parameter. The component parameter will hold the instance of HomeComponent. So we can call any function inside the component except private functions. Let's create a function named canDeactivate() in HomeComponent which returns an Observable of boolean type. Here it would pop-up a confirm dialog box with message 'Are you sure to leave the page?'. Based on the option selected the value will be set to confirm variable and we will return it as an observable.

Modify home.component.ts file with the following code

1

import { Component, OnInit } from '@angular/core';

2

import { of, Observable } from 'rxjs';

3

​

4

@Component({

5

  selector: 'app-home',

6

  templateUrl: './home.component.html',

7

  styleUrls: ['./home.component.css']

8

})

9

export class HomeComponent implements OnInit {

10

​

11

  constructor() { }

12

​

13

  ngOnInit() {

14

  }

15

​

16

  canDeactivate(): Observable<boolean> {

17

    const confirm = window.confirm('Are you sure to leave the page?');

18

    return of(confirm);

19

  }

20

}

21

So the finally updated code will be as above. Now we have to set the gaurd to the component in app-routing.module.ts file.

1

import { NgModule } from '@angular/core';

2

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

3

import { AuthGuard } from './guards/auth.guard';

4

import { CanDeactivateGuard } from './guards/auth-deactivate.guard';

5

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

6

​

7

const routes: Routes = [

8

  { path: 'home', component: HomeComponent, canActivate: [AuthGuard], canDeActivate:[CanDeactivateGuard] },

9

];

10

​

11

@NgModule({

12

  imports: [RouterModule.forRoot(routes)],

13

  exports: [RouterModule]

14

})

15

export class AppRoutingModule { }

16

Now when we try to navigate away from HomeComponent, it will pop-up a confirm dialog and based on its option, navigation will be decided.