Introducció

Les guàrdies de ruta (route guards) en Angular són una funcionalitat que permet controlar l'accés a les rutes d'una aplicació. Aquestes guàrdies poden ser utilitzades per protegir rutes, verificar permisos d'usuari, carregar dades abans de mostrar una vista, entre altres usos. En aquest tema, aprendrem a crear i utilitzar guàrdies de ruta en una aplicació Angular.

Tipus de guàrdies de ruta

Angular proporciona diversos tipus de guàrdies de ruta, cadascun amb una finalitat específica:

CanActivate: Controla si una ruta pot ser activada.
CanActivateChild: Controla si les rutes filles poden ser activades.
CanDeactivate: Controla si es pot sortir d'una ruta.
Resolve: Carrega dades abans d'activar una ruta.
CanLoad: Controla si un mòdul pot ser carregat.

Creació d'una guàrdia de ruta

Pas 1: Crear la guàrdia

Per crear una guàrdia de ruta, utilitzarem l'Angular CLI. Suposem que volem crear una guàrdia AuthGuard per protegir rutes que requereixen autenticació.

ng generate guard auth

Això generarà un fitxer auth.guard.ts amb el següent contingut:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // Implementar la lògica d'autenticació aquí
    return true;
  }
}

Pas 2: Implementar la lògica de la guàrdia

Modifiquem el mètode canActivate per implementar la lògica d'autenticació. Suposem que tenim un servei AuthService que ens permet verificar si l'usuari està autenticat.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Pas 3: Aplicar la guàrdia a una ruta

Ara que tenim la nostra guàrdia AuthGuard implementada, podem aplicar-la a les rutes que volem protegir. Suposem que volem protegir la ruta /dashboard.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Exercici pràctic

Objectiu

Crear una guàrdia de ruta que protegeixi una ruta /admin i redirigeixi els usuaris no autenticats a la pàgina de login.

Passos

Crear la guàrdia: Utilitza l'Angular CLI per crear una guàrdia AdminGuard.
Implementar la lògica: Modifica el mètode canActivate per verificar si l'usuari està autenticat.
Aplicar la guàrdia: Aplica la guàrdia a la ruta /admin.

Solució

Crear la guàrdia:

ng generate guard admin

Implementar la lògica:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Aplicar la guàrdia:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AdminGuard } from './admin.guard';

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AdminGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Resum

En aquest tema, hem après què són les guàrdies de ruta en Angular i com utilitzar-les per protegir rutes en una aplicació. Hem vist els diferents tipus de guàrdies disponibles i hem creat una guàrdia AuthGuard per protegir rutes que requereixen autenticació. També hem realitzat un exercici pràctic per reforçar els conceptes apresos. En el següent mòdul, explorarem els formularis en Angular, incloent-hi formularis basats en plantilles i formularis reactius.

Guàrdies de ruta

Introducció

Tipus de guàrdies de ruta

Creació d'una guàrdia de ruta

Pas 1: Crear la guàrdia

Pas 2: Implementar la lògica de la guàrdia

Pas 3: Aplicar la guàrdia a una ruta

Exercici pràctic

Objectiu

Passos

Solució

Resum

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques