Multiple canActivate guards all run when first fails

by

This is due to the fact you are returning a Promise<boolean> instead of just a boolean. If you were to just return a boolean it wouldn’t check the RoleGuard. I would guess this is either a bug in angular2 or an expected result of async requests.

You can however resolve this with your example by only using RoleGuard for urls where a certain Role is required, because I guess you need to be logged in to have a role. In that case you can change your RoleGuard to this:

@Injectable()
export class RoleGuard implements CanActivate {
  constructor(private _authGuard: AuthGuard) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return this._authGuard.canActivate(route, state).then((auth: boolean) => {
      if(!auth) {
        return false;
      }
      //... your role guard check code goes here
    });
  }
}

Update
In the latest Angular version (currently v8.x) – Even if both Guard will return false – they will still be both executed. (behavior was aligned between different return values)

More Related Contents:

  1. How do I create a singleton service in Angular 2?
  2. ‘router-outlet’ is not a known element
  3. Angular 2 Scroll to top on Route Change
  4. Angular 2 unit testing components with routerLink
  5. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  6. How do I detect user navigating back in Angular2?
  7. Angular2 – Interaction between components using a service
  8. Angular2 router keep query string
  9. Lazy Loading BrowserModule has already been loaded
  10. Pass parameter into route guard
  11. How to determine previous page URL in Angular?
  12. Read response headers from API response – Angular 5 + TypeScript
  13. How to dynamically add a directive?
  14. How to get query parameters from URL in Angular 5?
  15. In Angular, how do you determine the active route?
  16. angular 2 sort and filter
  17. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  18. How to make a sequence of http requests in Angular 6 using RxJS
  19. How to set unique template reference variables inside an *ngFor? (Angular)
  20. Angular 4 HttpClient Query Parameters
  21. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  22. Type casting within a template in Angular 2
  23. Subscribing to a nested Observable
  24. Angular 2 translation change language in application
  25. Enabling CORS on Azure Active Directory
  26. How to return value inside subscribe Angular 4
  27. Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  28. Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty
  29. Angular 2 ngOnInit not called
  30. Firestore how to get the collection value from another collection document id is referenced

Leave a Comment