Cosa sono i route guard?

Question

Accepted Answer

I **route guard** sono funzioni che controllano **se la navigazione verso/da una route è consentita**. Vengono eseguiti prima che una route si attivi (o prima che la lasciate), abilitando controlli di autenticazione, controllo delle autorizzazioni e prompt "modifiche non salvate". ## I tipi di 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 ``` ## Un guard CanActivate funzionale (Angular moderno) ```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 }; ``` Un guard restituisce `true` (consenti), `false` (blocca), o un `UrlTree` (reindirizza). Angular moderno utilizza **guard funzionali** (funzioni semplici con `inject()`) al posto di quelli più vecchi basati su classi. ## Applicare guard alle route ```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 — evitare la perdita accidentale di dati ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Questo guard classico avvisa gli utenti prima di navigare lontano da un modulo con modifiche non salvate. ## I guard possono essere asincroni ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Perché è importante I guard sono il modo standard e centralizzato per applicare il controllo di accesso e le regole di navigazione in Angular — proteggendo le route autenticate, controllando per ruolo/autorizzazione, prevenendo la perdita di dati all'uscita e precaricando i dati (resolver). Porre questi controlli nei guard (piuttosto che sparsi nei componenti) mantiene la logica di sicurezza e navigazione coerente e dichiarativa; il `authGuard` sulle route protette è qualcosa che praticamente ogni app Angular reale implementa.