Come suggerisce il nome, lo scopo principale di Angular Route Guards è proteggere l’accesso a un determinato percorso, come un’area autenticata della tua app o una sezione di amministrazione che richiede autorizzazioni speciali per l’accesso. Una volta che l’accesso a un percorso è stato bloccato, il passaggio successivo è spesso reindirizzare l’utente a un’altra vista. In quanto tale, questa funzionalità è spesso integrata in Route Guard, iniettando il router tramite il costruttore e invocando uno dei suoi metodi di navigazione.

Essendo associati a un percorso specifico, i Route Guard funzionano meravigliosamente come centralini di routing in grado di impostare la vista della destinazione in base a una serie di fattori dinamici. Nell’articolo di oggi creeremo un Route Guard che determina il percorso parametrizzato in base al risultato di una chiamata di metodo a un asincrono servizio.

Leggere: Programmazione asincrona in JavaScript

Le limitazioni delle rotte statiche in angolare

Sebbene Angular consenta l’impostazione di reindirizzamenti come parte delle definizioni del percorso,
questi sono limitati a stringhe hardcoded:

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' }
];

Di conseguenza, non possiamo determinare la vista di reindirizzamento in fase di esecuzione. Possiamo, tuttavia, inserire una Route Guard nella rotta che viene invocata quando il percorso corrisponde. Il itinerari l’array seguente dichiara due viste principali: casa e utenti. Quest’ultimo comprende anche un :ID parametro che personalizzerà la vista per un utente specifico:

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "users",
    canActivate: [RedirectService],
    component: UsersComponent
  },
  {
    path: "users/:id",
    component: UsersComponent
  },
  {
    path: "**",
    pathMatch: "full",
    redirectTo: "/home"
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  declarations: [HomeComponent, UsersComponent],
  exports: [RouterModule]
})
export class RoutingModule {}

Attivando il utenti view invocherà quindi il nostro RedirectService’s canActivate() metodo, che ci consente di reindirizzare l’utente dell’applicazione alla pagina utente appropriata. Anche se abbiamo specificato un componente per il utenti percorso (è obbligatorio), non atterreremo mai lì perché il nostro Servizio di reindirizzamento intercetterà la navigazione tra rotte e reindirizzerà a una parametrizzata utenti/:id percorso invece.

Leggere: Strumenti e librerie HTML, CSS e JavaScript

Il servizio di reindirizzamento

Tutto ciò che un servizio richiede per agire come Route Guard è implementare il CanActivate interfaccia. Agisce come un contratto in base al quale il nostro servizio promette di includere il canActivate() metodo. Oltre a ciò, deve restituire uno dei tre tipi:

1. Osservabile
2. Prometto
3. booleano

I primi due sono ideali per lavorare con servizi asincroni esterni e/o librerie come RxJS. Il nostro metodo restituirà un Osservabile ed emulare una chiamata di servizio esterna creando il nostro Osservabile e introducendo un ritardo. Per determinare quale ID utente per impostare il :ID parametro a, lanceremo i dadi e sceglieremo un numero casuale tra 1 e 6. In un’applicazione del mondo reale, probabilmente dovremmo almeno controllare le autorizzazioni. Potrebbero esserci anche una varietà di altre condizioni da controllare, dalle modalità dell’applicazione alle opzioni selezionate nella pagina corrente.

@Injectable()
export class RedirectService implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): Observable<boolean> {
    this.getInitialUserId().subscribe((userId: number) => {
      this.router.navigate(["users/" + userId]);
    });
    return of(false);
  }

  private getInitialUserId(): Observable<number> {
    return Observable.of(this.randomIntFromInterval(1, 6)).delay(500);
  }

  private randomIntFromInterval(min: number, max: number) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
}

Per aggiungere il ID utente al percorso corrente, possiamo iniettare l’oggetto Router tramite il costruttore e impiegarne uno dei tanti navigare() metodi per reindirizzare alla nuova pagina.

Si noti che, anche se stiamo reindirizzando, il canActivate() il metodo deve comunque restituire un valore. Per convertire il valore booleano di falso a un Osservabile, possiamo utilizzare il RxJS di() metodo. Tornando falso impedisce all’applicazione di navigare nel file utenti visualizzare prima che si sia verificato il reindirizzamento. Poiché si verifica un ritardo, potremmo vedere una pagina utente vuota per una frazione di secondo prima che si ricarichi.

Leggere: RxJS Observables Primer in angolare

La Componente Utenti

Una volta attivato il percorso parametrizzato, la componente target (Componente Utenti) può utilizzare il :ID parametro iscrivendosi al ActivatedRoute’s Parametri osservabili. Per semplificare le cose, lo visualizzeremo semplicemente nella pagina:

@Component({
  selector: "users-component",
  template: `<h1>Users Component</h1>
    <p>This view is for user #{{ userId }}</p>`
})
export class UsersComponent {
  public userId: string;

  constructor(route: ActivatedRoute) {
    route.params.subscribe((params) => {
      this.userId = params["id"];
    });
  }
}

Come sempre, c’è una demo del progetto di oggi Codesandbox.io.

Ecco l’output del codice sopra nel browser:

Conclusione del routing dinamico in Angular 12

In questo articolo è stato creato un Route Guard per reindirizzare a una route parametrizzata in base al risultato di una chiamata al metodo a un processo asincrono. In questo modo, il nostro Route Guard funziona come un centralino di routing in grado di impostare la vista di destinazione in fase di esecuzione. Ho anche visto il componente di destinazione gestire i reindirizzamenti. La domanda se inserire il login di reindirizzamento nel componente o in Route Guard dipenderà dalla possibilità o meno che l’utente non disponga di autorizzazioni sufficienti per accedere al componente in questione.

Per saperne di più Tutorial di programmazione e sviluppo web JavaScript.