In Angular, guards are special services that control whether a user can navigate to or away from a certain route. Think of them as gatekeepers for your application’s navigation — they help protect routes by allowing or blocking access based on specific conditions like authentication, authorization, or any custom logic. Guards make your app more secure and user-friendly by preventing unauthorized or unintended route changes.
Types of Angular Guards
Angular provides five primary types of guards, each serving a unique purpose in route protection:
- CanActivate: Controls if a route can be activated. It determines whether a user can enter a route.
- CanActivateChild: Controls if child routes of a route can be activated.
- CanDeactivate: Controls if a user can leave a route, often used to warn users about unsaved changes.
- Resolve: Pre-fetches data before the route is activated, ensuring data is ready for the component.
- CanLoad: Prevents the application from loading entire feature modules lazily if the user isn’t authorized.
Each guard type implements an interface and returns a boolean or an observable/promise resolving to a boolean.
How to Implement a Guard
To implement a guard, you create a service that implements one of the guard interfaces from @angular/router. For example, to create a CanActivate guard:
typescript
CopyEdit
import { Injectable } from ‘@angular/core’;
import { CanActivate, Router } from ‘@angular/router’;
@Injectable({
providedIn: ‘root’
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(): boolean {
const isLoggedIn = /* your authentication logic */;
if (!isLoggedIn) {
this.router.navigate([‘/login’]);
return false;
}
return true;
}
}
In this example, the guard checks if a user is logged in. If not, it redirects them to the login page and blocks access.
Applying Guards to Routes
Once you’ve created your guard service, you apply it to routes in your routing module by adding the guard to the route’s canActivate, canActivateChild, or other relevant property:
typescript
CopyEdit
const routes = [
{
path: ‘dashboard’,
component: DashboardComponent,
canActivate: [AuthGuard]
}
];
Here, the AuthGuard protects the dashboard route so only authenticated users can access it.
Why Use Guards?
- Security: Prevent unauthorized access to sensitive pages.
- Data Safety: Warn users about unsaved changes using CanDeactivate.
- Better User Experience: Avoid loading pages or modules unnecessarily.
- Data Handling: Use Resolve to fetch data before showing components, reducing loading spinners or empty states.
Guards act as checkpoints, making sure your app behaves as intended based on user state or other conditions.
Best Practices for Angular Guards
- Keep logic simple: Guards should be fast and simple to avoid slowing down navigation.
- Use Observables: Guards can return observables to handle asynchronous checks like API calls.
- Combine guards: You can use multiple guards on the same route to enforce layered security.
- Handle redirection: Always redirect users if a guard denies access to guide them appropriately.
- Use lazy loading with CanLoad: Prevent loading large modules unnecessarily if the user isn’t allowed.
Real-World Example: Authentication Guard
Imagine an app where only logged-in users can see their profile. An AuthGuard verifies login status by checking a token or session:
typescript
CopyEdit
canActivate(): boolean {
const token = localStorage.getItem(‘authToken’);
if (!token) {
this.router.navigate([‘/login’]);
return false;
}
return true;
}
This simple guard blocks access if the token is missing and sends the user to login.
Conclusion
Angular guards provide powerful control over route access, improving security, user experience, and app performance. By understanding and using these guards, you can protect your routes effectively and create apps that behave reliably under different user scenarios. Whether you need to restrict access, warn users, or pre-load data, Angular guards are your essential toolkit for smart routing.
