Route guards क्या हैं?

Question

Accepted Answer

**Route guards** ऐसे फ़ंक्शन हैं जो **नियंत्रित करते हैं कि क्या किसी route को navigate करना स्वीकृत है या नहीं**। ये एक route के सक्रिय होने से पहले (या आप इसे छोड़ने से पहले) चलते हैं, प्रमाणीकरण जांच, अनुमति नियंत्रण, और "अनसेव्ड परिवर्तन" प्रॉम्प्ट को सक्षम करते हैं। ## Guard के प्रकार ```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 ``` ## एक कार्यात्मक CanActivate guard (आधुनिक 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 }; ``` एक guard `true` (स्वीकृति दें), `false` (अवरुद्ध करें), या `UrlTree` (पुनर्निर्देशित करें) रिटर्न करता है। आधुनिक Angular **कार्यात्मक guards** (सादे फ़ंक्शन `inject()` के साथ) का उपयोग करता है पुराने क्लास-आधारित वाले की जगह। ## Routes पर guards लागू करना ```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; }; ``` यह क्लासिक guard अनसेव्ड सम्पादन वाले form से navigate करने से पहले उपयोगकर्ताओं को चेतावनी देता है। ## Guards अतुल्यकालिक हो सकते हैं ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## इसका महत्व क्यों है Guards Angular में एक्सेस नियंत्रण और navigation नियमों को लागू करने का मानक, केंद्रीयकृत तरीका है — प्रमाणीकृत routes की सुरक्षा, भूमिका/अनुमति द्वारा गेटिंग, बाहर निकलते समय डेटा हानि को रोकना, और डेटा पूर्व-लोड करना (resolvers)। इन जांचों को guards में रखना (components में बिखरे होने के बजाय) सुरक्षा और navigation logic को सुसंगत और घोषणात्मक रखता है; protected routes पर `authGuard` कुछ ऐसा है जो लगभग हर वास्तविक Angular ऐप लागू करता है।