Angular Academy · Lezione

Guardie funzionali delle route

Proteggere le route con guardie funzionali

Guardie funzionali delle route è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cosa sono le guardie di percorso

Le guardie decidono se la navigazione può procedere: proteggono i percorsi con l'autenticazione, chiedono conferma prima di lasciare un modulo o limitano l'accesso in base al ruolo. Angular moderno utilizza guardie funzionali, semplici funzioni senza classi.

CanActivateFn

Un CanActivateFn restituisce true per consentire la navigazione, false per bloccarla, un UrlTree per reindirizzare oppure un observable o una promise di uno di questi valori.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Collegare una guard a una route

Colleghi le guard con canActivate (un array, così può concatenarne diverse).

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

Reindirizzare con UrlTree

Restituire un UrlTree (da router.createUrlTree o parseUrl) blocca e reindirizza in un unico passaggio.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Guard asincrone

Le guard possono restituire un observable: il router attende il primo valore e poi completa.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Accedere alle informazioni della route in una guard

Una CanActivateFn riceve ActivatedRouteSnapshot e RouterStateSnapshot, così può leggere parametri, dati e URL tentato.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

Guard canMatch

CanMatchFn decide se una definizione di route corrisponde effettivamente a una route, utile per sostituire le route in base a un feature flag o per eseguire il lazy loading solo quando consentito.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

Guard canDeactivate

CanDeactivateFn viene eseguita quando si lascia una route, ed è perfetta per chiedere conferma in presenza di modifiche non salvate. Riceve l'istanza del componente.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Concatenare più guard

Tutte le guard nell'array devono consentire la navigazione. Vengono eseguite insieme; se una restituisce false o un UrlTree, la navigazione viene bloccata o reindirizzata.

canActivate: [authGuard, roleGuard]
// both must pass

Perché preferire le guard funzionali a quelle basate su classi

Le guard funzionali sono più semplici: non richiedono il codice boilerplate di @Injectable, consentono di usare facilmente inject(), sono componibili e tree-shakable. Le interfacce CanActivate basate su classi sono deprecate.

Guard e route figlie

canActivateChild protegge tutte le route figlie di un genitore in un unico punto, evitando di ripetere la guard su ogni figlia.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Verifica rapida

Verifichi la Sua comprensione delle guard funzionali.

Riepilogo: guard funzionali delle route

Le guard funzionali controllano la navigazione tramite semplici funzioni.

CanActivateFn: consente, blocca o reindirizza (UrlTree).
CanMatchFn: determina se una route corrisponde effettivamente.
CanDeactivateFn: chiede conferma prima di uscire.
Usi inject() per i servizi e concateni le guard negli array.

Prossimo argomento: eventi del router e navigazione.

Domande Frequenti

La lezione «Guardie funzionali delle route» è gratuita?

Sì — il testo completo di «Guardie funzionali delle route» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Guardie funzionali delle route»?

Proteggere le route con guardie funzionali Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Guardie funzionali delle route»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy