Molte applicazioni necessitano di un meccanismo di autenticazione e autorizzazione. Questo significa che prima di permettere all'utente di accedere a un component, è necessario verificare che l'utente ne abbia il permesso.
In questi casi torna utile utilizzare un guard che altro non è che una classe che implementa l'interfaccia CanActivate. Come si intuisce dal nome, un guard che implementa l'interfaccia CanActivate viene eseguito quando si cerca di navigare verso un component. In questa fase possiamo verificare i privilegi dell'utente e mandare avanti o bloccare la navigazione.
L'interfaccia CanActivate espone il metodo canActivate che è quello che viene realmente invocato. Questo metodo accetta in input la route da attivare e uno snapshot dello stato del router. Il primo parametro è quello più utile in quanto possiamo risalire alla route da attivare e fare tutti i controlli. Il metodo deve tornare un boolean, oppure una Promise o un Observable. Se il valore finale è false, la navigazione si blocca, altrimenti procede normalmente. In questo esempio possiamo vedere come creare un guard e come configurarlo nella route.
import { Injectable } from '@angular/core'; import { CanActivate } from '@angular/router'; @Injectable() export class ActivationGuard implements CanActivate { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return true; } } const routes: Routes = [ { path: 'second', component: SecondComponent, canActivate: [ActivationGuard] }, ];
Oltre a eseguire codice prima di navigare verso un component, il sistema di routing permette anche di eseguire codice prima di navigare via da un component. Questa funzionalità torna utile nelle form di dettaglio. In queste form, se l'utente modifica dei dati e poi naviga a un altro component senza salvare è buona cosa chiedere una conferma all'utente per evitare una involontaria perdita di dati.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Aggiungere interattività lato server in Blazor 8
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare Model as a Service su Microsoft Azure
Usare le collection expression per inizializzare una lista di oggetti in C#
Usare una container image come runner di GitHub Actions
Gestire undefined e partial nelle reactive forms di Angular
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Controllare gli accessi IP alle app con Azure Container Apps
Implementare il throttling in ASP.NET Core
Come migrare da una form non tipizzata a una form tipizzata in Angular
Sfruttare al massimo i topic space di Event Grid MQTT