0

llevo ya unas horas con este problema, no me valida el usuario si realmente existe o no en la base de datos, mi api rest funciona a la perfección y valida, con el json, pero al tratar de integrarlo con el angular, no me funciona como debe (No me muestra error en consola, ni en codigo) y no he logrado llegar a una solución, agradecería que me pudieran ayudar... ESTE SERIA MI LOGIN.component.html

<div class="contenedor"> 
<h1>Iniciar Sesion</h1><br>
<p>¡Bienvenido!</p>
<p>Por favor ingresar sus datos correctamente</p><br><br>

<p>
    <mat-form-field>
        <mat-label>CORREO ELECTRONICO </mat-label>
        <input matInput #correo>
    </mat-form-field><br>
    <mat-form-field>
        <mat-label>CONTRASEÑA </mat-label>
        <input matInput type="password" #contrasena>
    </mat-form-field><br>

</p>
<button class="boton_personalizado" (click)="loginUsuario(correo.value, contrasena.value)">Iniciar 
Sesion</button>

<ul><a class="registro" [routerLink]="['/registro']">¿No estas registrado? Registrate aqui!</a></ul>

<ul><a class="recuperar" [routerLink]="['/recuperarc']">¿Olvido su contraseña?</a></ul>
</div>

ESTE ES MI Login.component.ts

import { Component, OnInit } from '@angular/core';
import { UsuariosService } from 'src/app/services/usuarios-service.service'
import { Usuarios } from 'src/models/Usuarios';
import { Location, NgIf } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css',]
})
export class LoginComponent implements OnInit {

constructor(private usuariosService: UsuariosService,
private ubicacion: Location) { }

ngOnInit(): void {

}

loginUsuario(correo: string,contraseña: string): boolean{
if(!correo){
  alert("Campo correo vacio");
  return;
}
if(!contraseña){
  alert("Campo contraseña");
  return;
}
if(this.loginUsuario != null){
  alert("Acceso denegado")
}else {
  alert("Acceso permitido")
}
this.usuariosService.loginUsuario({correo, contraseña} as Usuarios)
  .subscribe(_=> this.volver());
}

volver(): void{
this.ubicacion.back();
}
}

ESTE ES MI USUARIO.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Usuarios } from 'src/models/Usuarios';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class UsuariosService {
private URL = 'http://localhost:8080/api'

httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

constructor(private http: HttpClient) {}

registrarUsuario(usuarios: Usuarios) {
const suffix = '/registrarUsuario'
return this.http.post<Usuarios>(this.URL+suffix, usuarios, this.httpOptions);
}

loginUsuario(usuarios: Usuarios): Observable<Usuarios> {
const suffix = '/loginUsuario/'
return this.http.post<Usuarios>(this.URL+suffix+usuarios, this.httpOptions);
}


}

Y mi models Usuarios

export interface Usuarios {
rut: number;
nombre: string;
apellido: string;
telefono: number;
correo: string;
direccion: string; 
contraseña: string;
producto: string;
permiso: string;

}

Si necesitan mas parte del código, avísenme por favor, gracias de antemano por sus respuestas.

3
  • no me funciona como debe... ¿Hay un error, te sale algo en la consola del navegador? Por favor, aclara este detalle el 8 may. 2020 a las 6:58
  • No, no tengo ningun error, no funciona como debe, no valida con la base de datos, lo modificare el 8 may. 2020 a las 7:01
  • Revise y no me sale nada en consola, creo que lo que envió del front, no esta llegando o no esta comparando con lo que tengo en base de datos el 8 may. 2020 a las 7:03

1 respuesta 1

0

Te adjunto tres cosas espero que te sean de utilidad:

1.- Veo que esto como conformar la url en el login y en el registro del usuario lo montas de distinta forma aunque estes pasando el mismo objeto en el registro lo pasas como parametro y en el login lo concatenas Concatenación vs parametrización

2.- Veo otro tema auque no creo que para este caso afecte la ruta de registro es '/registrarUsuario' mientras que la de login es '/loginUsuario/' acabando con "/" por lo que si lo concatenas puede darte algun error.

3.- Aunque no conozco mucho angular te dejo un ejemplo en el que añaden unos try/catch para capturar los errores

import 'rxjs/add/operator/catch'; // don't forget this, or you'll get a runtime error
this.httpClient
      .get("data-url")
      .catch((err: HttpErrorResponse) => {
        // simple logging, but you can do a lot more, see below
        console.error('An error occurred:', err.error);
      });

// or
this.httpClient
      .get("data-url")
      .subscribe(
        data => console.log('success', data),
        error => console.log('oops', error)
      );

o este ejemplo tambien puede ser de utilidad

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/empty';
import 'rxjs/add/operator/retry'; // don't forget the imports

@Injectable()
export class DataService {
    baseUrl = 'http://localhost';
    constructor(private httpClient: HttpClient) { }

    // notice the <T>, making the method generic
    get<T>(url, params): Observable<T> {
      return this.httpClient
          .get<T>(this.baseUrl + url, {params})
          .retry(3) // optionally add the retry
          .catch((err: HttpErrorResponse) => {

            if (err.error instanceof Error) {
              // A client-side or network error occurred. Handle it accordingly.
              console.error('An error occurred:', err.error.message);
            } else {
              // The backend returned an unsuccessful response code.
              // The response body may contain clues as to what went wrong,
              console.error(`Backend returned code ${err.status}, body was: ${err.error}`);
            }

            // ...optionally return a default fallback value so app can continue (pick one)
            // which could be a default value
            // return Observable.of<any>({my: "default value..."});
            // or simply an empty observable
            return Observable.empty<T>();
          });
     }
}

Esta ultima informacion la he encontrado en catching-errors-in-angular-httpclient

1
  • Gracias, pero sigo teniendo el mismo problema :c el 8 may. 2020 a las 14:20

Tu Respuesta

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

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