8-4 Route Guards in AngularJS
Key Concepts
Route Guards in AngularJS are used to control access to certain routes in your application. They allow you to run some code before a route is activated or deactivated, enabling you to implement features like authentication, authorization, and conditional navigation. The key concepts related to Route Guards include:
- CanActivate
- CanDeactivate
- Resolve
- CanLoad
1. CanActivate
The CanActivate guard is used to determine if a route can be activated. This is useful for scenarios where you need to check if a user is authenticated or has the necessary permissions to access a specific route.
Example:
app.config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl: 'profile.html',
controller: 'ProfileController',
resolve: {
auth: function($q, AuthService) {
if (AuthService.isAuthenticated()) {
return true;
} else {
return $q.reject('Not authenticated');
}
}
}
});
});
Imagine CanActivate as a bouncer at a club. Before allowing anyone to enter, the bouncer checks if they have the right credentials (authentication) or if they are on the guest list (authorization).
2. CanDeactivate
The CanDeactivate guard is used to determine if a user can leave a route. This is useful for scenarios where you need to prompt the user before navigating away, such as when they have unsaved changes.
Example:
app.config(function($routeProvider) {
$routeProvider
.when('/edit', {
templateUrl: 'edit.html',
controller: 'EditController',
resolve: {
canDeactivate: function($q, $location) {
if (confirm('Are you sure you want to leave?')) {
return true;
} else {
return $q.reject('Navigation cancelled');
}
}
}
});
});
Think of CanDeactivate as a security system that asks for a confirmation code (prompt) before allowing you to exit a secure area. If you don't provide the code, the system prevents you from leaving.
3. Resolve
The Resolve guard is used to fetch data before a route is activated. This ensures that the necessary data is available before the route's controller is instantiated.
Example:
app.config(function($routeProvider) {
$routeProvider
.when('/details/:id', {
templateUrl: 'details.html',
controller: 'DetailsController',
resolve: {
details: function($route, DataService) {
return DataService.getDetails($route.current.params.id);
}
}
});
});
Consider Resolve as a waiter who takes your order (data request) before you sit down at a table (route activation). The waiter ensures that your food (data) is ready before you start eating.
4. CanLoad
The CanLoad guard is used to determine if a module can be loaded lazily. This is useful for scenarios where you want to control the loading of modules based on certain conditions, such as user roles.
Example:
app.config(function($routeProvider) {
$routeProvider
.when('/admin', {
templateUrl: 'admin.html',
controller: 'AdminController',
resolve: {
canLoad: function($q, AuthService) {
if (AuthService.isAdmin()) {
return true;
} else {
return $q.reject('Not authorized');
}
}
}
});
});
Imagine CanLoad as a gatekeeper who checks your ID (user role) before allowing you to enter a restricted area (module). If your ID is valid, you are allowed in; otherwise, access is denied.