0

tengo el siguiente método en Angular en el que se hace un http.get:

  login(user: User): Observable<any> {
    const headers = new HttpHeaders({
      "Content-Type": "application/json"
    });

    return this.http.get(environment.apiURL + "users?email="+user.email, { headers }).pipe(
      retry(3),
      map(us => {
        if(us[0].email) {
          localStorage.setItem("user", JSON.stringify(us[0]));
          this.setUser();
          return us[0].password === user.password ? us[0] : 'Password not valid.'
        }
      }),
      catchError(this.handleError)
    );
  }

y me genera muchas dudas. La primera es que no entiendo donde pone "users?", en la url, lo que hace. Tampoco entiendo qué contienen esos arrays (cada uno de ellos identificado por us en el map) que devuelve el método get.

En este otro método se usa el método post:

  signup(user: User): Observable<any> {
    const headers = new HttpHeaders({
      "Content-Type": "application/json"
    });

    return this.http
      .post(environment.apiURL + "users/", user, { headers })
      .pipe(
        retry(3),
        map(r => {
          localStorage.setItem("user", JSON.stringify(r));
          this.setUser();
        }),
        catchError(this.handleError)
      );
  }

No entiendo que son esos objetos "r" que devuelve el post

Este es el json que se nos da en el ejemplo y al que se le hace el get y el post:

{
  "events": [
    {
      "id": "2",
      "title": "Introduction to RXJS",
      "location": "London",
      "date": "2019-10-02",
      "description": "Nulla aliqua duis adipisicing do amet et ullamco commodo id laborum nulla ipsum culpa. Lorem ipsum commodo quis amet consequat nostrud esse est deserunt. Laboris incididunt esse amet sunt tempor pariatur nisi irure nulla veniam id quis elit. Velit officia quis veniam aliqua. Cupidatat velit enim officia dolor ea veniam proident culpa ea duis labore nostrud. Occaecat in velit esse et. Duis anim ad elit ipsum occaecat Lorem veniam labore consequat laboris non.",
      "addedBy": "user01"
    },
    {
      "id": "3",
      "title": "AWS",
      "location": "Berlin",
      "date": "2019-11-21",
      "description": "Nulla aliqua duis adipisicing do amet et ullamco commodo id laborum nulla ipsum culpa. Lorem ipsum commodo quis amet consequat nostrud esse est deserunt. Laboris incididunt esse amet sunt tempor pariatur nisi irure nulla veniam id quis elit. Velit officia quis veniam aliqua. Cupidatat velit enim officia dolor ea veniam proident culpa ea duis labore nostrud. Occaecat in velit esse et. Duis anim ad elit ipsum occaecat Lorem veniam labore consequat laboris non.",
      "addedBy": "user01"
    },
    {
      "id": "4",
      "title": "Angular NgRx - introduction",
      "location": "Madrid",
      "date": "2019-12-05",
      "description": "Nulla aliqua duis adipisicing do amet et ullamco commodo id laborum nulla ipsum culpa. Lorem ipsum commodo quis amet consequat nostrud esse est deserunt. Laboris incididunt esse amet sunt tempor pariatur nisi irure nulla veniam id quis elit. Velit officia quis veniam aliqua. Cupidatat velit enim officia dolor ea veniam proident culpa ea duis labore nostrud. Occaecat in velit esse et. Duis anim ad elit ipsum occaecat Lorem veniam labore consequat laboris non.",
      "addedBy": "user01"
    },
    {
      "title": "orgia",
      "location": "mi casa",
      "date": "2020-08-13",
      "description": "divertida",
      "addedBy": "",
      "id": "kiscg4b"
    }
  ],
  "users": []
}

Y esto es el servicio completo en el que se enmarca el método login y signup:

import { Injectable } from "@angular/core";
import {
  HttpClient,
  HttpErrorResponse,
  HttpHeaders
} from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError, retry, map } from "rxjs/operators";
import { environment } from "../../environments/environment";
import { User } from "../models/user";

@Injectable({
  providedIn: "root"
})
export class UserService {
  constructor(private http: HttpClient) {}
  isAuthenticated: boolean;

  signup(user: User): Observable<any> {
    const headers = new HttpHeaders({
      "Content-Type": "application/json"
    });

    return this.http
      .post(environment.apiURL + "users/", user, { headers })
      .pipe(
        retry(3),
        map(r => {
          localStorage.setItem("user", JSON.stringify(r));
          this.setUser();
        }),
        catchError(this.handleError)
      );
  }

  login(user: User): Observable<any> {
    const headers = new HttpHeaders({
      "Content-Type": "application/json"
    });

    return this.http.get(environment.apiURL + "users?email="+user.email, { headers }).pipe(
      retry(3),
      map(us => {
        if(us[0].email) {
          localStorage.setItem("user", JSON.stringify(us[0]));
          this.setUser();
          return us[0].password === user.password ? us[0] : 'Password not valid.'
        }
      }),
      catchError(this.handleError)
    );
  }

  logout() {
    localStorage.setItem("user", '');
    return false;
  }

  checkUser(): boolean {
    this.setUser();
    return this.isAuthenticated;
  }

  private setUser() {
    this.isAuthenticated = localStorage.getItem("user") ? true : false;
  }

  // Error handling

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error("An error occurred:", error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues about what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` + `body was: ${error.error}`
      );
    }
    // return an observable with a user-facing error message
    return throwError("Something bad happened; please try again later.");
  }
}

Muchas gracias de antemano

2
  • Hola!, se le llama RxJs, checa esto para mas info... medium.com/angular-in-depth/…. Ahora ando un poco corto de tiempo, si nadie mas te responde luego lo hago yo.
    – Legna
    Commented el 30 ago. 2020 a las 18:07
  • Te recomiendo que le eches un vistazo a los métodos HTTP disponibles y a la documentación del cliente HTTP de Angular. El cliente requiere que le pases una url válida (ej: http://localhost:8080/users) para poder conectar. La interogación implica un parámetro de búsqueda (los usuarios con un email igual a...) y tanto us como r son los elementos de respuesta que ha obtenido el cliente, que corresponden a los elementos del JSON que has publicado.
    – David DPG
    Commented el 23 ago. 2021 a las 9:43

1 respuesta 1

1

Pues estás hablando de los parámetros de URL y el map de RxJS.

Parámetros


Para hacer consultas a la base de datos se pueden hacer o bien insertando los datos en el cuerpo de la petición, o en la misma URL, esto último son los parámetros de consulta.

Los parámetros se suelen usar para realizar consultas a la base de datos, pero NUNCA para iniciar sesión (en serio, ni se te ocurra usarlo en producción), comprende que estás enviando información sensible (email y contraseña) y encima lo estás metiendo en la URL como consulta, como alguien consiga ver esa información (y créeme, se los estás dejando muy fácil), va a tener acceso a esa cuenta.

La cosa es que users? no es un parámetro, si no la dirección a la que vas a enviar la información, esto en backend y APIs se llama endpoint, y es la ruta que lleva al controlador que tratará la información. Como puedes observar, la dirección contiene una consulta llamada email, y ahí le estás pasando el contenido de la propiedad email que hay dentro del objeto users

//                                         __A__ __B__ ______C_____
//                                        |     |     |            |
return this.http.get(environment.apiURL + "users?email="+user.email, { headers }).pipe(

Fíjate en lo siguiente:

  • A: es el endpoint, la dirección a la que le enviarás el contenido de B.
  • B: es el nombre del parámetro, una simple identificación de lo que le precede.
  • C: es el contenido del parámetro.

Como dato extra, el segundo parámetro del método GET (del módulo HttpClient de Angular) son los headers, ahí le estás indicando que el contenido de la petición es de tipo JSON, sin embargo esto no tiene mucho sentido, GET no se suele usar con un cuerpo adjunto.

Map


RxJS tiene un operador llamado map que se suele usar para transformar la información del flujo. Para que map funcione, debe devolver algo, pero en tu ejemplo no veo un return.

map(r => {
  localStorage.setItem("user", JSON.stringify(r));
  this.setUser();
}),

En este caso, no tiene mucho sentido usar map porque lo único que estás haciendo es añadir al localStorage el valor de r. En tu caso yo usaría una suscripción de forma directa.

r y us se refiere al objeto que estás tratando con map. Si no hay otro operador anterior, será toda la información devuelta de la consulta. También debes prestar atención, r es la respuesta que viene del http, y lo estás metiendo todo en el localStorage. Debes ser selectivo, si un ítem tiene la clave users, debes guardar valores de usuarios.

Por cierto, si te está dando un fallo, revisa bien ese JSON, la estructura no corresponde a la forma en la que estás accediendo a la información. Ese JSON tiene 2 propiedades, estas son arrays, la primera es un array de objetos y la otra es un array vacío. Pero en ninguna existe la propiedad email

Observa tu consulta GET, en el map estás accediendo (en us) a la propiedad email, sin embargo estás usando un índice (us[0].email), esto no se puede hacer con objetos, para ello debes acceder de alguna de estas formas:

us.users...    // TypeScript probablemente te exija una interfaz o un tipo.
us['users']... // TypeScript no dirá ni mu.

Al ver que events no contiene email, asumo que users si los llevaría.

PD: b.events[3], pásalo bien 😂

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.