mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00

kirjs 737777ef72 docs: add Angular Developer Skill updates

Includes:

- Imports and setup instructions

- Validation examples (sync, async, conditional)

- FieldState vs FormField distinction

- Common pitfalls and best practices

- Full-featured example application

(cherry picked from commit ed150e52d1)

2026-03-17 17:39:44 -07:00

1.4 KiB

Raw Blame History

Route Guards

Route guards control whether a user can navigate to or leave a route.

Types of Guards

CanActivate: Can the user access this route? (e.g., Auth check).
CanActivateChild: Can the user access children of this route?
CanDeactivate: Can the user leave this route? (e.g., Unsaved changes).
CanMatch: Should this route even be considered for matching? (e.g., Feature flags). If it returns false, the router continues checking other routes.

Creating a Guard

Guards are typically functional since Angular 15.

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  }

  // Redirect to login
  return router.parseUrl('/login');
};

Applying Guards

Add them to the route configuration as an array. They execute in order.

{
  path: 'admin',
  component: Admin,
  canActivate: [authGuard],
  canActivateChild: [adminChildGuard],
  canDeactivate: [unsavedChangesGuard]
}

Return Values

boolean: true to allow, false to block.
UrlTree or RedirectCommand: Redirect to a different route.
Observable or Promise: Resolves to the above types.

Security Note

Client-side guards are NOT a substitute for server-side security. Always verify permissions on the server.

1.4 KiB Raw Blame History