In my project I have two guards. AuthGuard and PermissionGuard. I need to first AuthGuard runs and when it resolved and if true the permissionGuard begins but now this guards are running parallel and permissionGuard not working well. the way I used for this issue is that I called the AuthGuard CanActivate method in Permission guard but I think there is a quite better way for doing this.

In my project I have two guards. AuthGuard and PermissionGuard. I need to first AuthGuard runs and when it resolved and if true the permissionGuard begins but now this guards are running parallel and permissionGuard not working well. the way I used for this issue is that I called the AuthGuard CanActivate method in Permission guard but I think there is a quite better way for doing this.

• javascript
• angular
• angular2-routing

• Maybe this answer can help you. I think he has the same problem. – Philipp Kief Commented Dec 23, 2016 at 12:41
• thanks, the answer of question you mentioned is same way I did but as I said I think that better way maybe exists. – Hossein Ahmadi Commented Dec 23, 2016 at 12:48
• @hosseinahmadi. Do you still need help with this? – AngularChef Commented Feb 23, 2017 at 14:42
• That answer duplicates the existing guard. Can we pass the instance of the other guard into the new one? – Jeff Commented May 10, 2017 at 1:29
• Does this answer your question? Multiple canActivate guards all run when first fails – planet_hunter Commented Nov 25, 2019 at 10:02

3 Answers 3

The best way I've seen it done is to expose the router guards on child routes. Here is a working example.

{
  path:'', canActivate:[AuthorizationService1], 
    children: [
      {
        path:'', canActivate:[AuthorizationService2],ponent: HomeComponent
      }
    ]
}

guards can't really depend on each other unfortunately. you can do as another person suggested and make one on the parent route and one on a child route, or My preference is just to make a third guard that runs both checks on it's own sequentially so I don't need to muddy up my routes, assuming they're implemented as observables:

@Injectable({ providedIn: 'root' })
export class AuthAndPermissionGuard implements CanActivate {
  constructor(private authGuard: AuthGuard, permGuard: PermGuard) { }
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authGuard.canActivate(next, state).pipe(
      switchMap(isAuthed => isAuthed ? this.permGuard.canActivate(next, state) : of(false))
    );
  }
}

you can esaly pass two gurd to routes like this :

{
   path:'', canActivate:[AuthorizationGuards1,AuthorizationGuards2] 
}

after AuthorizationGuards1 success AuthorizationGuards2 activated, the relation between these two guard is st like AuthorizationGuards1 && AuthorizationGuards2 conditions.