Mitä ovat Route Guards?

Question

Accepted Answer

**Route guards** ovat funktioita, jotka ohjaavat **sallitaanko navigointi reitille/reitiltä pois**. Ne suoritetaan ennen kuin reitti aktivoidaan (tai ennen kuin poistu siitä), mikä mahdollistaa todennuksen tarkistuksen, käyttöoikeuksien hallinnan ja "tallentamattomat muutokset" -kehotukset. ## Vahdin tyypit ```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 ``` ## Funktionaalinen CanActivate-vahti (moderni 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 }; ``` Vahti palauttaa `true` (salli), `false` (estä) tai `UrlTree` (uudelleenohjaus). Moderni Angular käyttää **funktionaalisia vahdin** (tavallisia funktioita `inject()`-komennolla) vanhempien luokkapohjaistenversion sijaan. ## Vahdinten soveltaminen reiteille ```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 — estä tahaton tietojen menetys ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Tämä perinteinen vahti varoittaa käyttäjiä ennen poistumista lomakkeelta, jolla on tallentamattomia muutoksia. ## Vahdit voivat olla asynkronisia ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Miksi sillä on väliä Vahdit ovat vakio- ja keskitetty tapa pakottaa pääsynhallinta ja navigointisäännöt Angularissa — autentikoidun reitit suojaaminen, portit roolin/käyttöoikeus perusteella, tietojen menetyksen estäminen poistumisesta ja tietojen ennakkoon lataaminen (resolvers). Näiden tarkistuksien sijoittaminen vahdeihin (sen sijaan, että ne olisivat hajallaan komponenteissa) pitää turvallisuus- ja navigointilogiikan johdonmukaisena ja deklaratiivisena; `authGuard` suojatuilla reiteillä on jotain, minkä käytännöllisesti kaikki oikeat Angular-sovellukset toteuttavat.