Routing
Route Guards
CanActivate, Access Control
💡 Route guard ek bouncer/security guard hai kisi club ke bahar — har visitor (navigation attempt) ko check karta hai "kya ye andar jaane layak hai?" — agar nahi, entry deny kar deta hai (redirect kar deta hai kahi aur).
Route guards navigation ko CONTROL karte hain — CanActivate (route access allow/deny karta hai, jaise "login zaroori hai"), CanDeactivate (route CHHODNE se pehle check, jaise "unsaved changes hain, sure ho?"). Function-based guards (modern Angular) return true/false ya UrlTree (redirect).
// auth.guard.ts (modern, function-based):
import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';
export const authGuard: CanActivateFn = () => {
const authService = inject(AuthService);
const router = inject(Router);
if (authService.isLoggedIn) {
return true; // access allow
}
router.navigate(['/login']);
return false; // access deny, redirect
};
// Route mein apply karna:
// { path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] }🛡️
Route guard ek bouncer/security guard hai kisi club ke bahar — har visitor (navigation attempt) ko check karta hai "kya ye andar jaane layak hai?" — agar nahi, entry deny kar deta hai (redirect kar deta hai kahi aur).
1 / 6
⚡ झट से Recap
- CanActivate = route access control (login required jaisa)
- CanDeactivate = route chhodne se pehle check (unsaved changes)
- Modern Angular = function-based guards, inject() ke saath
इस page में (2 subtopics)
CanActivateChild parent route ke SAARE child routes ko EK saath protect karta hai — bar-bar har child route par CanActivate lagाने ki zaroorat nahi, parent par ek baar lagाओ.
// Route mein parent level par:
// {
// path: 'admin',
// canActivateChild: [authGuard],
// children: [
// { path: 'users', component: AdminUsersComponent },
// { path: 'settings', component: AdminSettingsComponent }
// ]
// }
// Dono children automatically protected ho gaye, EK guard seTip: CanActivateChild especially useful hai admin sections jaise cases mein jaha SAARE sub-routes ko SAME protection chahiye — DRY principle follow karta hai, repetition avoid karके.
Resolver route ACTIVATE hone se PEHLE data FETCH karता hai — component ko GUARANTEE milta hai ki jab wo load ho, DATA already ready hai (loading spinners ki zaroorat kam ho jaati hai).
export const userResolver: ResolveFn<User> = (route) => {
const userService = inject(UserService);
const id = route.paramMap.get('id')!;
return userService.getUserById(id); // Observable/Promise return karo
};
// Route mein:
// { path: 'users/:id', component: UserDetailComponent, resolve: { user: userResolver } }
// Component mein data already ready milta hai:
// const user = this.route.snapshot.data['user'];Tip: Resolvers "data-ready" navigation guarantee karte hain — trade-off ye hai ki navigation THODA slow hoti hai (data fetch hone ka wait karta hai), lekin component ke andar loading states manage nahi karne padte.