Angular CanActivate vs CanDeactivate
Asked on July 28, 2018
What is difference between Angular CanActivate and CanDeactivate route guard and how to use them?
Replied on July 28, 2018
Angular CanActivate and CanDeactivate are the route guards in Angular routing. CanActivate decides if a route can be activated. CanDeactivate decides if route can deactivated. Find in details.
CanActivate
CanActivate is
an Angular interface. It guards a link and allow to access
conditionally such as in user authentication application. We can enter
into application only after login. So the application links will be
guarded by CanActivate and will be accessible only after login. Find the sample code.
1. Create a service implementing CanActivate
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(private authService: AuthService, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
console.log('Url:'+ url);
if (this.authService.isUserLoggedIn()) {
return true;
}
this.authService.setRedirectUrl(url);
this.router.navigate([ this.authService.getLoginUrl() ]);
return false;
}
}
export class AuthGuardService implements CanActivate {
constructor(private authService: AuthService, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
console.log('Url:'+ url);
if (this.authService.isUserLoggedIn()) {
return true;
}
this.authService.setRedirectUrl(url);
this.router.navigate([ this.authService.getLoginUrl() ]);
return false;
}
}
2. In route configuration, configure the AuthGuardService service using canActivate property.
{
path: 'home',
component: DashboardLayoutComponent,
canActivate: [ AuthGuardService ]
}
path: 'home',
component: DashboardLayoutComponent,
canActivate: [ AuthGuardService ]
}
Now /home path and its children path will not be allowed to be activated until canActivate() of AuthGuardService returns true.
Find the reference link.
CanDeactivate
CanDeactivate is an interface that is implemented by a class to create a guard which decides if a route can be deactivated. The guard can be added to any component route using canDeactivate attribute of Angular Route interface. Any component which needs to use CanDeactivate guard, has to define canDeactivate method and that will be called by guard class that has been created implementing CanDeactivate interface.
CanDeactivate guard
can be used in the scenario, for example, suppose a user is changing
form data and before saving, user tries to navigate away. In this
scenario we can use CanDeactivate guard which will deactivate the route
and open a Dialog Box to take user confirmation.
1. First we will create an interface that will declare canDeactivate method and using this interface we will create a service that will act as CanDeactivate guard. This service will define canDeactivate method. Now find our CanDeactivate guard.
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) {
let url: string = state.url;
console.log('Url: '+ url);
return component.canDeactivate ? component.canDeactivate() : true;
}
}
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) {
let url: string = state.url;
console.log('Url: '+ url);
return component.canDeactivate ? component.canDeactivate() : true;
}
}
2. In route configuration, configure the CanDeactivateGuard service using canDeactivate property.
{
path: ':person',
component: PersonEditComponent,
canDeactivate: [CanDeactivateGuard]
}
path: ':person',
component: PersonEditComponent,
canDeactivate: [CanDeactivateGuard]
}
Find the reference link.
