Kas yra maršruto saugikliai?

Question

Accepted Answer

**Maršruto saugikliai** – tai funkcijos, kurios kontroliuoja, **ar leidžiama navigacija į maršrutą / iš maršruto**. Jie veikia prieš suaktyvinant maršrutą (arba prieš jį opaling), suteikdami galimybę atlikti autentifikacijos patikras, leidimų kontrolę ir "neišsaugotų pakeitimų" ragimus. ## Saugiklio tipai ```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 ``` ## Funkcinė CanActivate saugiklis (šiuolaikinis 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 }; ``` Saugiklis grąžina `true` (leisti), `false` (blokuoti) arba `UrlTree` (nukreipti). Šiuolaikinis Angular naudoja **funkcinius saugiklius** (paprastas funkcijas su `inject()`) vietoj senesnių klasėse pagrįstų. ## Saugiklių taikymas maršrutams ```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 – duomenų praradimo prevencija ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Šis klasikinis saugiklis įspėja naudotojus prieš opaling iš formos, kurioje yra neišsaugoti redagavimai. ## Saugikliai gali būti asinchroniniai ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Kodėl tai svarbu Saugikliai – tai standartinis, centralizuotas būdas priešgaisrinės prieigos kontrolę ir navigacijos taisykles Angular – apsaugojant autentifikuotus maršrutus, kontroliuojant pagal rolę / leidimus, prevencinėms duomenų praradimui išeinant ir iš anksto keliamus duomenis (resolver). Šių patikrų dedimas saugikliuose (vietoj to, kad jos būtų išsilaistę komponentuose) išlaiko saugumo ir navigacijos logiką nuoseklią ir deklaracinę; `authGuard` apsaugotuose maršrutuose yra tai, ką praktiškai įgyvendina kiekviena tikra Angular programa.