Guardie delle route in Angular

Questa lezione spiega come proteggere le route nelle applicazioni Angular utilizzando le guardie delle route.

Che cosa sono le guardie delle route?

Le guardie delle route controllano l'accesso alle route in Angular. Sono utili per proteggere le route sensibili o soggette a restrizioni.

Tipi di guardie

• CanActivate: determina se una route può essere attivata.
• CanActivateChild: protegge le route figlio.
• CanDeactivate - verifica le condizioni prima di lasciare una route.
• Resolve - recupera in anticipo i dati prima di attivare la route.

Creare una guardia

Crei una guardia utilizzando Angular CLI:

ng generate guard auth

Implementare canActivate()

Il metodo canActivate() controlla l'accesso alla route:

canActivate(): boolean {
  return true; // or false to block navigation
}

Utilizzare le guardie nelle route

Aggiunga le guardie alle route nel modulo di routing:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

Guardia CanDeactivate

CanDeactivate impedisce di lasciare una route se non vengono soddisfatte determinate condizioni; è utile per i moduli:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Guardia Resolve

La guardia Resolve recupera i dati prima del caricamento di una route:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Riepilogo

Ha imparato a proteggere e migliorare la navigazione nelle sue app Angular con le guardie delle route. Continui così!