Protección de rutas en Angular con guardianes

Clase 19 de 25 • Curso de Angular Router: Lazy Loading y Programación Modular

Resumen

Una aplicación tendrá N cantidad de rutas, pero es posible que muchas de estas tengan restricciones de acceso solo para administradores o determinados roles de usuario.

En estos casos, los Guards llegan para ayudarnos a darle seguridad a nuestras rutas.

Cómo segurizar Rutas

Con ayuda del CLI de Angular, puedes crear tu primer guardián con el comando ng generate guard <nombre-guard> o en su forma corta ng g g <nombre-guard>.

1. Creando el primer guard

Al utilizar este comando, nos hará una pregunta sobre qué interfaz quieres que implemente por defecto:

Cada opción tiene una funcionalidad distinta para cada tipo de Guard. Escoge la primera opción llamada CanActivate.

Al auto generar el código, verás tu primer Guard con el siguiente aspecto.

// modules/shared/guards/admin.guard.ts
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

}

Un Guard puede devolver un booleano, una promesa con un booleano o un observable, también con un booleano. Dependiendo la lógica que tengas que aplicar para el caso sea síncrona o asíncrona.

2. Importando el guard

Ahora importa el nuevo Guard el routing de tu aplicación.

// app-routing.module.ts
import { AdminGuard } from './modules/shared/guards/admin.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/website/website.module').then(m => m.WebsiteModule),
    data: { preload: true },
  },
  {
    path: 'cms',
    loadChildren: () => import('./modules/cms/cms.module').then(m => m.CmsModule),
    canActivate: [ AdminGuard ],
    data: { preload: true },
  }
];

Agrégale a las rutas que quieras segurizar canActivate: [ AdminGuard ].
De esta manera, ya puedes implementar la lógica que necesites para cada Guard. En este caso, permitir el acceso al módulo CMS solo para usuarios administradores.

Contribución creada por: Kevin Fiorentino.

Juan Luna

student•

Bueno ya sabemos que los profesores están despegados de los comentarios de sus alumnos, porque no contestan nada, ni a preguntas ni a nada, que lástima, con lo buena que es esta plataforma ....

user.model.ts

export interface User {
  id: string;
  name: string;
  email: string;
  password: string;
  role: 'customer' | 'admin';
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface CreateUserDTO extends Omit<User, 'id' | 'role'> {}

profile.component.html

<div *ngIf="user">
    <h2>My Profile</h2>
    <p>Nombre: {{user.name}}</p>
    <p>Email: {{user.email}}</p>
    <p>Role: {{user.role || 'customer'}}</p>
</div>

esa es una solución fácil y ya veremos cuando apliquen lo del admin

Jorddi Suarez

student•

Actualmente la API no permite agregar una propiedad "role" para la creación de nuevos users

Informatica ITE

student•

Si no le quito la propiedad role marca error

Jimmy Buriticá Londoño

student•

Guards

Los Guards en Angular, son de alguna manera: middlewares que se ejecutan antes de cargar una ruta y determinan si se puede cargar dicha ruta o no.

Carlos Eduardo Mayorga Rodríguez

student•

Para no tener problemas con el rol del usuario, si se está continuando el desarrollo desde el curso anterior, se tiene que tener en cuenta que la API ahora es otra. https://damp-spire-59848.herokuapp.com La del curso anterior es https://young-sands-07814.herokuaoo.com/api/iusers

Alberto Cruz

student•

Excelente, Gracias por el aporte!.

Oscar Ivan Lozoya Rodríguez

student•

Para generar guardianes es:

ng g g

la segunda g es por Guards, para generar lo que nos enseña en esta clase es

ng g g guards/auth

Franklin Gil

student•

Lo que nunca vi en el curso es que tambien se puede colocar completo, por ejemplo ng generate guard | component | pipe | service | ...

Alberto Cruz

student•

Todo iba bien, hasta que cambian el api, por que la que se venia desarrollando no soporta los roles

Andrés Felipe Schambach Tarazona

student•

Para los que tengan problemas con la creación de los guardianes por

utilicen el comando

ng generate guard guards/auth

alberto ayala rodriguez

student•

el tema de los guardianes está cool 🖖

LEONARDO FERNANDEZ

student•

que pasaría si el token esta vencido? igual seguira existiendo en el local storage por ende me deja entrar al perfil asi el token este vencido que se deberia hacer en ese caso?

Carlos Eduardo Mayorga Rodríguez

student•

Yo he venido realizando el ejercicio desde el primer curso, no he cargado los repositorios, y veo que los fuentes entre un curso y otro cambian. En este punto no puedo crear el usuario con role, dado que la API no reconoce el rol. Que se debe hacer en este caso?

Alexis Duque

student•

Esto me funciono!

Christian Ricardo Conchari Cabrera

student•

Les comparto el código del archivo auth.guard.ts con el que he podido continuar con el curso a la fecha:

import { inject } from '@angular/core';
import { CanActivateFn } from '@angular/router';
import { TokenService } from '../services/token.service';


export const authGuard: CanActivateFn = (route, state) => {
  const tokenService: TokenService = inject(TokenService);
  if (tokenService.getToken()) {
    return true;
  }
  return false;
};

El resto de archivos los tengo igual que los trabajados en la clase.

Jorge Luis Oseguera López

student•

Si están trabajando con el código anterior y no lo han descargado del repositorio del profesor, como yo eh hecho. Probablemente tengan problemas con el Login. El problema es que como cambiaron de API, el usuario que por default pusieron en el código anterior no existe. Para esto solo tienen que crear un nuevo usuario con el siguiente endpoint:

POST: https://damp-spire-59848.herokuapp.com/api/users

{
    "name": "Usuario",
    "email": "correo@correo.com",
    "password": "123456"
}

Después poner el la parte del componente "nav.component.ts", en el método login:

login(): void {

    this.authService.loginAndGet('correo@correo.com', '123456')
    .subscribe(user => {
      console.log(user);
      this.profile = user;
    });

  }

LUIS ANTONIO CALVO QUISPE

student•

o tambien puedes incluir en otro button, el metodo para crear los usuarios ..

  onCreateUser() {
    this.usersService.postSave(
      {
        email: 'luis@gmail.com',
        password: '1073',
        name: 'Luis'
      }
    )
    .subscribe(data =>{
      console.log(data);
    })
  }

Santiago Velandia Gallo

student•

Hice esto porque en el nav-bar seguía apareciendo el boton al cambiar de pagina

  ngOnInit(): void {
    this.storeService.myCart$.subscribe(products => {
      this.counter = products.length;
    });
    this.getAllCategories();
    const token = this.tokenService.getToken();
       if(token){
        this.authService.getProfile().subscribe(data=>{
          this.profile =data;
        });
       }
  }

Andres David Caicedo Marquez

student•

En postman

ELKIN YESID MORENO VELEZ

student•

¿ Que pasa cuando el usuario es consumidor y administrador ?

Se crean dos usuarios Se tiene un usuario y dos roles. (Roles por usuario).

Rahiber Paradas

student•

Lo más recomendable es tener un usuario y con N cantidad de roles, el usuario al hacer login debería poder seleccionar con cual rol ingresar o tener dos login diferente, uno para los usuarios y otro para los admin.

Kengya Moncada

student•

import { HttpClient } from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
import {
  loginResponse,
  user,
  userLogin,
} from 'src/app/models/user.model';
import { catchError, tap } from 'rxjs/operators';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { Router } from '@angular/router';
import { StorageService } from './storage.service';
import { ToastService } from './toast.service';
import { isPlatformBrowser } from '@angular/common';
import { environment } from 'src/app/core/constants/environment';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(
    this.isAuthenticated()
  );
  isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
  constructor(
    private http: HttpClient,
    private router: Router,
    private localStorage: StorageService,
    private ToastServices: ToastService,
    @Inject(PLATFORM_ID) private platformId: object
  ) {}

  createUser(userData: user) {
    const url = `${environment.api.baseUrl}${environment.api.users.create}`;
    this.ToastServices.show(
      'Has sido registrado exitosamente',
      'success',
      3000
    );
    return this.http.post<user>(url, userData);
  }

  loginUser(userData: userLogin): Observable<loginResponse> {
    const url = `${environment.api.baseUrl}${environment.api.auth.login}`;
    return this.http.post<loginResponse>(url, userData).pipe(
      tap((resp) => {
        console.log('Respuesta del login:', resp);
        this.localStorage.setItem('access_token', resp.access_token);
        this.localStorage.setItem('refresh_token', resp.refresh_token);
        this.isAuthenticatedSubject.next(true);
        this.ToastServices.show('Has iniciado sesión', 'success', 3000);
      }),
      catchError((error) => {
        this.ToastServices.show('Usario no registrado', 'error', 3000);
        return throwError(() => error);
      })
    );
  }

  private isTokenValid(token: string): boolean {
    const helper = new JwtHelperService();
    return !helper.isTokenExpired(token);
  }

  public isAuthenticated(): boolean {
    if (isPlatformBrowser(this.platformId)) {
      const token = this.localStorage.getItem('access_token');
      return token ? this.isTokenValid(token) : false;
    }
    return false;
  }

  logout(): void {
    this.localStorage.removeItem('access_token');
    this.localStorage.removeItem('refresh_token');
    this.isAuthenticatedSubject.next(false);
    this.router.navigate(['/auth/login']);
  }

  updateAuthStatus(): void {
    const isAuthenticated: boolean = this.isAuthenticated();
    this.isAuthenticatedSubject.next(isAuthenticated);
  }
}

Kengya Moncada

student•

import { Injectable } from '@angular/core';
import { Router} from '@angular/router';
import { StorageService } from '../modules/auth/storage.service';

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

  constructor(private localStorage: StorageService, private router: Router) {}

  canActivate(): boolean {
    setTimeout(() => {
      const token = this.localStorage.getItem('access_token');
      if (!token) {
        this.router.navigate(['/auth/login']);
      }
    }, 0);

    return true;
  }
}

Diego Frank Lipa Choque

student•

Model User

export interface User {
  id: string;
  email: string;
  password: string;
  name: string;
  role: string;
}

Protección de rutas en Angular con guardianes

Manejo de rutas

Angular Router y Programación Modular en eCommerce

Implementación de Routing en Angular: Creación de Componentes y Páginas

Configuración de rutas y refactorización de componentes en Angular

Renderizado Dinámico de Productos por Categoría en Angular

Optimización de suscripciones con SwitchMap en Angular

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Implementación de página 404 personalizada en aplicaciones web

Creación de Página de Detalle de Producto en eCommerce

Lectura de Parámetros URL en Angular para Filtrado y Navegación

Módulos

Optimización de JavaScript con Code Splitting en Angular

Programación Modular en Angular: Módulos y Lazy Loading

Vistas Anidadas y Programación Modular en Angular

Creación de un Módulo CMS con Enrutamiento en Angular

Transformación de Carpeta a Módulo en Angular

Creación y uso de módulos compartidos en Angular

Precarga de módulos

Precarga de Módulos en Angular para Mejorar el Rendimiento

Precarga de Módulos en Angular: Estrategias Personalizadas

Precarga de Módulos con QuickLink y Observable API en Angular

Guardianes