روٹ گارڈز کیا ہیں؟

Question

روٹ گارڈز کیا ہیں؟

Accepted Answer

**روٹ گارڈز** وہ فنکشنز ہیں جو **اس بات کو کنٹرول کرتے ہیں کہ کسی روٹ سے/کی طرف نیویگیشن دستیاز ہے یا نہیں**۔ یہ روٹ کے فعال ہونے سے پہلے چلتے ہیں (یا جب آپ کسی سے نکلتے ہیں)، جو آپ کو تصدیق کی جانچ، اجازت کا کنٹرول، اور "غیر محفوظ تبدیلیاں" کے نوٹس فراہم کرتے ہیں۔ ## گارڈ کی اقسام ```text CanActivate → can the user enter this route? (auth/permission check) CanActivateChild → same, for child routes CanDeactivate → can the user LEAVE? ("you have unsaved changes") CanMatch → should this route even be matched? (feature flags, role-based) resolve → pre-fetch data BEFORE the route activates ``` ## ایک functional CanActivate گارڈ (جدید Angular) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` ایک گارڈ `true` (دستیاز کریں)، `false` (روکیں)، یا `UrlTree` (ری ڈائریکٹ کریں) واپس کرتا ہے۔ جدید Angular **functional guards** استعمال کرتا ہے (سادہ فنکشنز `inject()` کے ساتھ) بجائے پرانی class-based اقسام کے۔ ## گارڈز کو روٹس پر لاگو کرنا ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate — غیر ارادی ڈیٹا نقصان سے بچاؤ ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` یہ روایتی گارڈ صارفین کو خالی ترمیمات کے ساتھ فارم سے نکلنے سے پہلے انتباہ دیتا ہے۔ ## گارڈز غیر مطابقت ہو سکتے ہیں ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## یہ کیوں اہم ہے گارڈز Angular میں رسائی کے کنٹرول اور نیویگیشن کے اصول کو نافذ کرنے کا معیاری، مرکزی طریقہ ہیں — تصدیق شدہ روٹس کی حفاظت کریں، کردار/اجازت کے لحاظ سے گیٹ کریں، باہر نکلتے وقت ڈیٹا کے نقصان سے روکیں، اور ڈیٹا کو پہلے سے لوڈ کریں (resolvers)۔ ان چیکس کو گارڈز میں ڈالنا (بجائے اس کے کہ انہیں components میں بکھیرا جائے) سیکیورٹی اور نیویگیشن کی منطق کو مطابقت پذیر اور اعلانی رکھتا ہے؛ محفوظ روٹس پر `authGuard` وہ چیز ہے جو تقریباً ہر حقیقی Angular ایپ نافذ کرتا ہے۔