Mik a route guardok?

Question

Accepted Answer

**Route guardok** olyan függvények, amelyek **szabályozzák, hogy a navigáció egy útvonalhoz/ról engedélyezett-e**. Az útvonal aktiválása előtt (vagy mielőtt elhagyná), hitelesítési ellenőrzéseket, engedély-vezérlést és "nem mentett változások" figyelmeztetéseket tesznek lehetővé. ## A guard típusok ```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 ``` ## Egy funkcionális CanActivate guard (modern 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 }; ``` Egy guard `true` (engedélyez), `false` (blokk) vagy `UrlTree` (átirányít) értéket ad vissza. A modern Angular **funkcionális guardokat** (sima függvények `inject()`-tel) használ a régebbi osztály-alapú helyett. ## Guardok alkalmazása útvonalakhoz ```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 — véletlen adatvesztés megakadályozása ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Ez a klasszikus guard figyelmeztet a felhasználókat, mielőtt elhagynak egy formot a nem mentett szerkesztésekkel. ## A guardok lehetnek aszinkronok ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Miért fontos A guardok a standard, központosított módja az Angular-ban a hozzáférés-ellenőrzés és navigációs szabályok érvényesítésének — a hitelesített útvonalak védelme, az engedélyek szerinti kézítés, az adatvesztés megakadályozása a kilépéskor és az adatok előzetes betöltése (resolvers). Ezeknek az ellenőrzéseknek a guardokba helyezése (ahelyett, hogy szét lennék szórva az összetevőkben) konzisztens és deklaratív biztonsággal és navigációs logikával tartja; a `authGuard` védett útvonalakon valami olyan dolog, amelyet gyakorlatilag minden valós Angular alkalmazás megvalósít.