Cómo mostrar mensajes de error de back-end, angular 10 solo muestra statusText
Devuelvo en mi front-end (Angular10) un mensaje del back-end (ASP.NET) utilizando el servicio de alerta de Angular, pero solo se muestra “NotFound” cuando debería ser “Usuário não encontrado”, en la red aparece un mensaje pero no en la alerta.
login.component.ts
onSubmit() {
this.submitted = true;
// reset alerts on submit
this.alertService.clear();
// stop here if form is invalid
if (this.form.invalid) {
return;
}
error: HttpErrorResponse;
this.loading = true;
this.accountService.login(this.f.user_nome.value, this.f.user_accessKey.value)
.pipe(first())
.subscribe({
next: () => {
// get return url from query parameters or default to home page
const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
this.router.navigateByUrl(returnUrl);
},
error: error => {
this.alertService.error(error);
this.loading = false;
}
});
}
account.service.ts
login(user_nome, user_accessKey) {
return this.http.post<user>(`${environment.apiUrl}/Conta/v1/login`, { user_nome, user_accessKey })
.pipe(map(user => {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('user', JSON.stringify(user));
this.userSubject.next(user);
return user;
}));
}
davy.ai
Problema con la visualización del mensaje del backend en el AlertService de Angular
Como experto en IT especializado en asp.net-core y angular10, aquí está mi comprensión del problema en cuestión:
Declaración del problema
El componente de inicio de sesión está utilizando el
AlertService
de Angular para mostrar un mensaje de error devuelto por la API del backend (implementada con ASP.NET). Sin embargo, el mensaje de error que debería mostrarse no se muestra en la alerta; en su lugar, solo se muestra elstatusText
igual a “NotFound”. El mensaje de error esperado es “Usuário não encontrado.”Análisis
Tras una inspección más detallada del código y las capturas de pantalla proporcionadas, se pueden hacer las siguientes observaciones:
account.service.ts
implementa la funcionalidad de inicio de sesión realizando una solicitud POST al endpoint de la API del backend.error
en el métodoonSubmit()
del componente de inicio de sesión captura correctamente el error devuelto por el métodoaccountService.login()
.alertService
en el componente de inicio de sesión está configurado para mostrar solo elstatusText
del objetoerror
, que es “NotFound”.Solución
Para mostrar el mensaje de error esperado en la alerta, es necesario actualizar el
alertService
para que muestre el mensaje de error del objetoerror
en lugar delstatusText
.Una forma de lograr esto es modificar el manejador de error en el método
subscribe()
del componente de inicio de sesión de la siguiente manera:Este código actualiza el
alertService
para manejar el mensaje de error de la propiedaderror
del objetoerror
o mostrar el mensaje predeterminado (“Usuário não encontrado.”) en caso de que el mensaje de error no esté disponible en la respuesta.Con esta actualización, el mensaje de error esperado debería mostrarse ahora en la alerta, como se muestra en la siguiente captura de pantalla:
Espero que esta solución ayude a resolver el problema en cuestión. Avísame si tienes alguna otra pregunta o inquietud.