Búsqueda de sitios web

java - Mensaje de error de Angular desde el servicio al componente


Me gustaría pedir sugerencias sobre cómo lograr que mis respuestas de error del backend aparezcan en el frontend. Para el backend estoy usando Spring Boot 2 y para el frontend estoy usando Angular 8. Entonces, en mi caso, cuando intento iniciar sesión, y si el usuario no proporciona las credenciales correctas, el usuario recibe un mensaje de error, pero en mi caso estoy usando un servicio que realiza la solicitud cuando el usuario hace clic en iniciar sesión después de proporcionar el correo electrónico y la contraseña. Obtengo el mensaje de error en la consola, pero es de mi servicio, no del componente, y quiero preguntar cómo puedo pasarlo al componente. Por ejemplo, proporciono un correo electrónico o contraseña incorrectos y cuando hago clic en iniciar sesión, recibo HttpErrorResponse con el siguiente mensaje de error "error: {success: false, message: \"¡Correo electrónico o contraseña inválidos!\"}", eso está bien, pero lo recibo en mi servicio, ¿cómo puedo pasar este error al componente de inicio de sesión? (intenté con sessionStorage, bastante tonto lo sé...)

auth.service.ts

 auth({email, password}, callback){
    const helper = new JwtHelperService();

    this.http.post('//localhost:8080/login',{email, password})
            .subscribe(userData => {
              localStorage.setItem('username', email);
              let tokenStr = 'Bearer ' + userData['accessToken'];
              localStorage.setItem('token', tokenStr);

              const tkn = localStorage.getItem('token');
              const decodedToken = helper.decodeToken(tkn);

              localStorage.setItem('currentUserId', decodedToken['sub']);
              console.log(decodedToken['sub']);

              return callback && callback(userData);
            },(err: HttpErrorResponse) => {
              console.log(err);
            });
}

login.component.ts

 login() {
    this.authService.auth(this.user, (e) => {

      let resp: any;
      resp = e.accessToken;

      if (resp != null) {
        // store user details  in local storage to keep user logged in between page refreshes
        this.accountService.loadProfile()
            .subscribe(user => {
              localStorage.setItem('currentUser', JSON.stringify(user));
              this.router.navigateByUrl('/profile');
            }, (err:HttpErrorResponse) => {
              console.log(err.error);
            })
      }
    });
  }

Respuesta #1

No te suscribas en el auth.service, en su lugar devuelve un observable para que pueda ser suscrito en otro lugar. Realiza los siguientes cambios:

 auth({email, password}, callback){
    const helper = new JwtHelperService();
    return this.http.post('//localhost:8080/login',{email, password});             
 }

En su lugar, suscríbete desde el login.component.ts

login() {

    ...

    this.authService.auth(...).subscribe(() => {
       // code when it is successful
    }, (err:HttpErrorResponse) => {
       console.log(err.error.message);
    }
}

Artículos relacionados