Guards funcionales

Avanzado
Angular
Angular
Actualizado: 27/08/2024

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

Introducción

Los guards en angular se utilizan para proteger rutas de accesos no autorizados.

¿Te está gustando esta lección?

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Por ejemplo se podrían utilizar para proteger una pantalla de formulario de creación de libros (book-form.component.html) de ser accedida por un usuario que no tenga el rol ADMIN y solo tenga el rol USER.

Crear un guard

Crear un Guard para comprobar si el usuario tiene rol ADMIN y permitir el paso a las rutas.

Ejecutar el comando:

ng generate guard authentication/role-admin

El resultado es un nuevo archivo llamado role-admin.guard.ts con el siguiente contenido:

import { CanActivateFn} from '@angular/router';

export const roleAdminGuard: CanActivateFn = (route, state) => {
    return true;
};

Comprobar el rol del usuario en el guard

Para comprobar el rol del usuario se utilizaría un AuthenticationService y que devolvería true o false si el usuario tiene rol ADMIN:

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthenticationService } from './authentication.service';

export const roleAdminGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthenticationService);
  const router = inject(Router);

  // Si el usuario es administrador entonces puede entrar en la pantalla
  if (authService.getIsAdmin()){
    return true;
  } else {
    return router.navigate(['/login']); // si no es admin entonces redirige a login
  }
};

Proteger rutas con el guard

Una vez creado el guard, podemos proteger rutas en el archivo app.routes.ts:

  {
    path: 'authors',
    component: AuthorListComponent
  },
  {
    path: 'authors/:id/detail',
    component: AuthorDetailComponent
  },
  {
    path: 'authors/create',
    component: AuthorFormComponent,
    canActivate: [roleAdminGuard]
  },
  {
    path: 'authors/:id/update',
    component: AuthorFormComponent,
    canActivate: [roleAdminGuard]
  },

Con este código canActivate: [roleAdminGuard] en las rutas deseadas logramos que solo los usuarios con rol ADMIN puedan acceder a esas rutas, y si no tienen rol ADMIN entonces serán redirigidos hacia la pantalla de login.

Crear guard para comprobar login

Crear un nuevo guard para proteger rutas y que solo sean accesibles por usuarios autenticados, sin tener en cuenta su rol, solo si está autenticado sí o no:

ng generate guard authentication/user-logged-in

Resultado:

Pulsamos enter y se genera el guard:

Código generado:

import { CanActivateFn } from '@angular/router';

export const userLoggedInGuard: CanActivateFn = (route, state) => {
  return true;
};

En este guard comprobamos si el usuario ha iniciado sesión con la ayuda del AuthenticationService:

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthenticationService } from './authentication.service';

export const userLoggedInGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthenticationService);
  const router = inject(Router);

  if (authService.existsToken()) {
    return true;
  } else {
    return router.navigate(['/login']);
  }
};

Una vez completado el código del guard lo utilizamos sobre las rutas que se desea proteger en app.routes.ts:

Por ejemplo:

  {
    path: 'books/:id/detail',
    component: BookDetailComponent,
    canActivate: [userLoggedInGuard]
  }

De este modo podemos tener múltiples guards para proteger las rutas:

Resultado:

Si un usuario intenta entrar a los componentes que tienen el guard sin hacer primero el login será redirigido automáticamente hacia la pantalla de login, no pudiendo entrar al componente sin haberse identificado primero.

Aprendizajes de esta lección

  • Crear un Guard con Angular CLI
  • Comprobar el rol del usuario desde el Guard
  • Utilizar el Guard en las rutas en app.routes.ts
  • Proteger rutas de usuarios no autenticados
  • Proteger rutas de usuarios no autorizados

Completa Angular y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración