Angular 4 Multiple Guards - Execution Sequence
Just create a master guard which one injects the sub guards, here is an example:
app.guard.ts
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { GuardA } from '...';
import { GuardB } from '...';
@Injectable({
providedIn: 'root',
})
export class AppGuard implements CanActivate {
constructor(
// inject your sub guards
private guardA: GuardA,
private guardB: GuardB,
) {
}
public async canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
for (const guard of this.getOrderedGuards()) {
if (await guard.canActivate(next, state) === false) {
return false;
}
}
return true;
}
// -> Return here the sub guards in the right order
private getOrderedGuards(): CanActivate[] {
return [
this.guardA,
this.guardB,
];
}
}
Then in your app-routing.module.ts
const routes: Routes = [
{
path: 'page',
loadChildren: './pages.module#PageModule',
canActivate: [AppGuard],
}
];
Of course you have to manage your modules so that the guards are provided (understand injectable) into your AppGuard.
I chose a different path --- Nesting my guards and making them dependencies of each other.
I have a RequireAuthenticationGuard and a RequirePermissionGuard. For most routes they need to both run but there is a specific order I require.
The RequireAuthenticationGuard depends on my authN services to check if the current session is authenticated.
The RequirePermissionGuard depends on my authZ services to check if the current session is authorized for a route.
I add the RequireAuthenticationGuard as a constructor dependency of RequirePermissionGuard and only begin checking permissions if authentication has been determined.
require-authentication.guard.ts
constructor(
private userSessionSerivce: UserSessionService) {}
canActivate(
_route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
): Observable<boolean> {
return this.validateAuthentication(state.url);
}
require-permission.guard.ts
constructor(
private permissionService: PermissionService,
/**
* We use the RequireAuthenticationGuard internally
* since Angular does not provide ordered deterministic guard execution in route definitions
*
* We only check permissions once authentication state has been determined
*/
private requireAuthenticationGuard: RequireAuthenticatedGuard,
) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
): Observable<boolean> {
const requiredPermissions: Permission[] = next.data.permissions || [];
return this.requireAuthenticationGuard
.canActivate(next, state)
.pipe(
mapTo(this.validateAuthorization(state.url, requiredPermissions)),
);
}
Using a Master Guard to fire application guards can do the trick.
EDIT : Adding the code snippet for better understanding.
I faced the similar problem and this is how I solved it -
Solution
The idea is to create a master guard and let the master guard handle the execution of other guards.
The routing configuration in this case, will contain master guard as the only guard.
To let master guard know about the guards to be triggered for specific routes, add a data property in Route.
The data property is a key value pair that allows us to attach data with the routes.
The data can then be accessed in the guards using ActivatedRouteSnapshot parameter of canActivate method in the guard.
The solution looks complicated but it will assure proper working of guards once it is integrated in the application.
Following example explains this approach -
Example
1. Constants Object to map all application guards -
export const GUARDS = {
GUARD1: "GUARD1",
GUARD2: "GUARD2",
GUARD3: "GUARD3",
GUARD4: "GUARD4",
}
2. Application Guard -
import { Injectable } from "@angular/core";
import { Guard4DependencyService } from "./guard4dependency";
@Injectable()
export class Guard4 implements CanActivate {
//A guard with dependency
constructor(private _Guard4DependencyService: Guard4DependencyService) {}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return new Promise((resolve: Function, reject: Function) => {
//logic of guard 4 here
if (this._Guard4DependencyService.valid()) {
resolve(true);
} else {
reject(false);
}
});
}
}
3. Routing Configuration -
import { Route } from "@angular/router";
import { View1Component } from "./view1";
import { View2Component } from "./view2";
import { MasterGuard, GUARDS } from "./master-guard";
export const routes: Route[] = [
{
path: "view1",
component: View1Component,
//attach master guard here
canActivate: [MasterGuard],
//this is the data object which will be used by
//masteer guard to execute guard1 and guard 2
data: {
guards: [
GUARDS.GUARD1,
GUARDS.GUARD2
]
}
},
{
path: "view2",
component: View2Component,
//attach master guard here
canActivate: [MasterGuard],
//this is the data object which will be used by
//masteer guard to execute guard1, guard 2, guard 3 & guard 4
data: {
guards: [
GUARDS.GUARD1,
GUARDS.GUARD2,
GUARDS.GUARD3,
GUARDS.GUARD4
]
}
}
];
4. Master Guard -
import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
//import all the guards in the application
import { Guard1 } from "./guard1";
import { Guard2 } from "./guard2";
import { Guard3 } from "./guard3";
import { Guard4 } from "./guard4";
import { Guard4DependencyService } from "./guard4dependency";
@Injectable()
export class MasterGuard implements CanActivate {
//you may need to include dependencies of individual guards if specified in guard constructor
constructor(private _Guard4DependencyService: Guard4DependencyService) {}
private route: ActivatedRouteSnapshot;
private state: RouterStateSnapshot;
//This method gets triggered when the route is hit
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
this.route = route;
this.state = state;
if (!route.data) {
Promise.resolve(true);
return;
}
//this.route.data.guards is an array of strings set in routing configuration
if (!this.route.data.guards || !this.route.data.guards.length) {
Promise.resolve(true);
return;
}
return this.executeGuards();
}
//Execute the guards sent in the route data
private executeGuards(guardIndex: number = 0): Promise<boolean> {
return this.activateGuard(this.route.data.guards[guardIndex])
.then(() => {
if (guardIndex < this.route.data.guards.length - 1) {
return this.executeGuards(guardIndex + 1);
} else {
return Promise.resolve(true);
}
})
.catch(() => {
return Promise.reject(false);
});
}
//Create an instance of the guard and fire canActivate method returning a promise
private activateGuard(guardKey: string): Promise<boolean> {
let guard: Guard1 | Guard2 | Guard3 | Guard4;
switch (guardKey) {
case GUARDS.GUARD1:
guard = new Guard1();
break;
case GUARDS.GUARD2:
guard = new Guard2();
break;
case GUARDS.GUARD3:
guard = new Guard3();
break;
case GUARDS.GUARD4:
guard = new Guard4(this._Guard4DependencyService);
break;
default:
break;
}
return guard.canActivate(this.route, this.state);
}
}
Challenges
One of the challenges in this approach is refactoring of existing routing model. However, it can be done in parts as the changes are non-breaking.
I hope this helps.
Take a look at this Angular guide (link). "If you were using a real world API, there might be some delay before the data to display is returned from the server. You don't want to display a blank component while waiting for the data.
It's preferable to pre-fetch data from the server so it's ready the moment the route is activated. This also allows you to handle errors before routing to the component...
In summary, you want to delay rendering the routed component until all necessary data have been fetched.
You need a resolver."