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
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 tantous
comor
son los elementos de respuesta que ha obtenido el cliente, que corresponden a los elementos del JSON que has publicado.