Kaj so varnostna vrata poti?

Question

Accepted Answer

**Varnostna vrata poti** so funkcije, ki nadzorujejo, **ali je navigacija do/od poti dovoljena**. Izvršajo se pred aktivacijo poti (ali pred odhodom s nje), omogočajo preverjanje avtentičnosti, nadzor dovoljenj in pozive "nespravljene spremembe". ## Vrste varnostnih vrat ```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 ``` ## Funkcijsko varnostno vrata CanActivate (sodoben 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 }; ``` Varnostna vrata vrnejo `true` (dovoli), `false` (blokiraj) ali `UrlTree` (preusmeri). Sodoben Angular uporablja **funkcijska varnostna vrata** (navadne funkcije z `inject()`) namesto starejših na podlagi razredov. ## Uporaba varnostnih vrat na poteh ```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 — preprečevanje naključne izgube podatkov ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` To klasično varnostno vrata opozori uporabnike pred navigacijo stran iz obrazca z nespravljenimi ureditvami. ## Varnostna vrata so lahko asinkrona ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Zakaj je to pomembno Varnostna vrata so standardni, centralizirani način za uveljavljanje nadzora dostopa in pravil navigacije v Angularju — zaščita overjenih poti, omejevanje glede na vlogo/dovoljenj, preprečevanje izgube podatkov ob izhodu in predhitro nalaganje podatkov (resolvers). Umestitev teh preverjanj v varnostna vrata (namesto razpršenih po komponentah) ohranja varnost in logiko navigacije dosledni in deklarativni; `authGuard` na zaščitenih poteh je nekaj, kar izvaja skoraj vsaka prava Angular aplikacija.