Cómo utilizar los protectores de ruta con el enrutador Angular

Introducción

Los protectores de navegación del enrutador Angular permiten otorgar o quitar acceso a ciertas partes de la navegación. Otro protector de ruta, el CanDeactivateguard, incluso permite evitar que un usuario abandone accidentalmente un componente con cambios sin guardar.

Nota: Los protectores de ruta del lado del cliente como este no están pensados ​​para ser una función de seguridad. No impedirán que un usuario inteligente descubra una forma de acceder a las rutas protegidas. Este tipo de seguridad debería implementarse en el servidor. En cambio, están pensados ​​para mejorar la experiencia del usuario (UX) de sus aplicaciones.

A continuación se muestran los 4 tipos de protectores de enrutamiento disponibles:

• CanActivate:Controla si se puede activar una ruta.
• CanActivateChild:Controla si se pueden activar los elementos secundarios de una ruta.
• CanLoad: Controla si se puede cargar una ruta. Esto resulta útil para los módulos de funciones que se cargan de forma diferida. Ni siquiera se cargarán si el protector devuelve falso.
• CanDeactivate: Controla si el usuario puede abandonar una ruta. Tenga en cuenta que esta protección no impide que el usuario cierre la pestaña del navegador o navegue a una dirección diferente. Solo impide acciones desde dentro de la propia aplicación.

Uso del CanActivateprotector de ruta

Los protectores de ruta se implementan con mayor frecuencia como clases que implementan la interfaz de protector de ruta necesaria.

Consideremos un ejemplo con un CanActivateprotector de ruta donde preguntamos a un authservicio si el usuario está autenticado:

puede-activar-route.guard.ts

import { Injectable } from '@angular/core';import {  CanActivate,  ActivatedRouteSnapshot,  RouterStateSnapshot } from '@angular/router';import { AuthService } from './auth.service';@Injectable()export class CanActivateRouteGuard implements CanActivate {  constructor(private auth: AuthService) {}

Observe cómo implementamos la CanActivateinterfaz declarando un canActivatemétodo. El método tiene acceso opcional a ActivatedRouteSnapshoty RouterStateSnapshot, en los casos en los que necesitaría información sobre la ruta actual.

En nuestro ejemplo, canActivatedevuelve un valor booleano dependiendo de si el usuario está autenticado o no, pero también podría haber devuelto un observable o una promesa que se resuelva en un valor booleano.

Para poder utilizarlos se deben proporcionar guardas de ruta como servicios.

Agreguémoslo a los proveedores de nuestro módulo de aplicación:

aplicación.módulo.ts

// ...import { AppRoutingModule } from './app-routing.module';import { CanActivateRouteGuard } from './can-activate-route.guard';import { AuthService } from './auth.service';

Y por último, querrás agregar el protector como parte de tu configuración de enrutamiento.

Aquí un ejemplo con un módulo de enrutamiento:

módulo de enrutamiento de aplicaciones.ts

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './home.component';import { DashboardComponent } from './dashboard.component';import { CanActivateRouteGuard } from './can-activate-route.guard';const routes: Routes = [  { path: '', component: HomeComponent },  { path: 'dashboard',    component: DashboardComponent,    canActivate: [CanActivateRouteGuard]  }];

Ahora sólo los usuarios que estén autenticados podrán activar la /dashboardruta.

Observe cómo proporcionamos una matriz de protecciones en la definición de la ruta. Esto significa que podríamos especificar múltiples protecciones para una sola ruta y se evaluarán en el orden en que se especifiquen.

La implementación CanLoadse CanActivateChildrealiza de manera similar.

Nota: La CanLoadinterfaz no tiene tanto acceso al estado actual del enrutador ni a la ruta activada.

Con esto concluye el ejemplo para CanActivatelos guardias de ruta.

Uso del CanDeactivateprotector de ruta

La CanDeactivateimplementación del protector presenta una pequeña diferencia, ya que debemos proporcionar el componente que se va a desactivar. Esto nos permite comprobar si hay cambios no guardados en el componente en cuestión.

Consideremos un ejemplo con un CanDeactivateprotector de ruta:

puede desactivar route.guard.ts

import { Injectable } from '@angular/core';import { CanDeactivate } from '@angular/router';import { DashboardComponent } from './dashboard.component';

En el ejemplo anterior, suponemos que hay un miembro en la clase del componente del panel de control unsavedChangesque se convierte en verdadero siempre que haya cambios sin guardar. La ruta no se desactivará a menos que no haya cambios sin guardar o que el usuario confirme.

Con esto concluye el ejemplo para CanDeactivatelos guardias de ruta.

Conclusión

En este tutorial, aprendiste sobre los protectores de ruta en Angular como CanActivatey CanDeactivate.

Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.