Conoce a los Guardianes

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">
    <h1>My Profile</h1>
    <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

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

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.

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

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

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

el tema de los guardianes está cool 🖖

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.

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": "[email protected]",
    "password": "123456"
}

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

login(): void {

    this.authService.loginAndGet('[email protected]', '123456')
    .subscribe(user => {
      console.log(user);
      this.profile = user;
    });

  }

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

utilicen el comando

ng generate guard guards/auth

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;
        });
       }
  }

Model User

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