0
I am trying to implement a login screen that accesses an api through a server, I need to pass the email and the user password to the api, and it returns me NULL in case of error or a number in case of success (user id).
I am receiving the following message by clicking the Submit button:
HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found",url: "https://dev.endereco/login/undefined", ok: false, …}
I also receive the following message:
POST https://dev.endereco/login/undefined 404 (Not Found)
Follow important parts of my code:
login.component.html:
<input type="text" required name="email" [(ngModel)]="usuario.email" #nome="ngModel" id="usuario" placeholder="Email">
<input type="password" required name="password" [(ngModel)]="usuario.password" #senha="ngModel" id="senha" placeholder="Senha">
<button type="submit" name="entrar" (click)="fazerLogin(usuario.email, usuario.password)" class="login" id="login-button">Entrar</button>
login.componentts.:
private usuario: Usuario = new Usuario(); //Usuario é meu tipo de dado, foi declarado uma interface que possui o email e o password.
public idUsuario: any = null;
public alertaUsuarioIncorreto: boolean = false;
constructor(private router: Router,
private authService: AuthService) { }
fazerLogin(usuario: Usuario): void{
this.authService.fazerLogin(usuario.email, usuario.password)
.subscribe(user => this.idUsuario = user);
if(this.idUsuario != null){ //se for diferente de null faz login
this.alertaUsuarioIncorreto = false;
this.router.navigate(['/home'])
}else{ //caso contrario mostra um toast com msg de erro
this.alertaUsuarioIncorreto = true;
var x = document.getElementById("toast")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}
}
}
auth.service.ts:
fazerLogin(email: string, password: string): Observable<Usuario> {
return this._http.post<Usuario>(AppSettings.API_ENDPOINT+email,password)
}
@Edit:
I tried to add a header provided by Angular (?):
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'my-auth-token'
})
};
passing the header as a function parameter:
fazerLogin(email: string, password: string): Observable<Usuario> {
return this._http.post<Usuario>(AppSettings.API_ENDPOINT+email,password, httpOptions)
}
Now I get:
: Response for preflight has invalid HTTP status code 404.
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Your component function takes only one parameter and you are passing two.
– Eduardo Vargas
Eduardo, the login function receives a type of User data that contains the user name and password. I believe the problem is not this
– veroneseComS
Receiving two parameters is different from receiving an object parameter with two properties. Try (click)="make Login(user)"
– Eduardo Vargas