Angular › Router Guards & Resolvers

How would you combine multiple route guards together to enforce both authentication and a specific user role?

Advanced

Answer

You list several guard functions in the canActivate array for a route, and Angular runs them in order, only allowing navigation to proceed if every single guard returns true, letting you compose simple, focused guards together rather than writing one large guard handling everything at once.

export const adminGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  return authService.currentUser()?.role === 'admin';
};

{ path: 'admin', component: AdminPanelComponent, canActivate: [authGuard, adminGuard] }

Real-world example An admin panel requires both a general authGuard confirming the user is logged in at all, and a separate adminGuard confirming their specific role is admin, composing two small, focused guards together on the same route.

Common follow-ups: What happens if the guards need to run in a specific order to work correctly?;How would you share common logic between several related guards without duplicating code?

Design Patterns in Angular;Services & Dependency Injection