Angular Route Guards: Protecting Routes with CanActivate and CanDeactivate
Angular Route Guards: Protecting Routes with CanActivate and CanDeactivate
Types of route guards:
- CanActivate: Prevents unauthorized access to routes
- CanDeactivate: Warns users before leaving unsaved changes
- CanLoad: Prevents lazy-loaded modules from loading
- Resolve: Pre-fetches data before route activation
Common use cases:
- Authentication checks before accessing dashboard
- Role-based access control for admin pages
- Confirming unsaved form changes before navigation
- Loading required data before rendering a page
Modern approach with functional guards in Angular 15+:
export const authGuard: CanActivateFn = () => {
const authService = inject(AuthService);
return authService.isLoggedIn() ? true : inject(Router).createUrlTree(['/login']);
};
How do you implement route protection in your Angular apps?
Route guards are essential for controlling navigation in Angular apps. Here's a comprehensive overview.
Types of route guards:
- CanActivate: Prevents unauthorized access to routes
- CanDeactivate: Warns users before leaving unsaved changes
- CanLoad: Prevents lazy-loaded modules from loading
- Resolve: Pre-fetches data before route activation
Common use cases:
- Authentication checks before accessing dashboard
- Role-based access control for admin pages
- Confirming unsaved form changes before navigation
- Loading required data before rendering a page
Modern approach with functional guards in Angular 15+:
export const authGuard: CanActivateFn = () => {
const authService = inject(AuthService);
return authService.isLoggedIn() ? true : inject(Router).createUrlTree(['/login']);
};
How do you implement route protection in your Angular apps?
Route guards are essential for securing Angular applications. CanActivate for authentication checks and CanDeactivate for unsaved changes warnings are the most commonly used. The functional guard approach in Angular 15+ simplifies implementation significantly. Combining guards with role-based access control creates a solid security layer for enterprise applications.
1 Guest(s)
1 Guest(s)