Angular error message from service pass to component

Question

I would like to ask for suggestions how to manage to get my error responses from backend to appear in the frontend. For backend i am using Spring boot 2 and for frontend i am using Angular 8.So in my case when i try to login, and if the user didn't provide the correct credentials then user gets an error message, but here in my case i am using a service which makes the request when the user clicks login after he provided email and password.I got the error message in the console but its from my service not from the component and i want to ask how can i pass it to the component. For example i provide wrong email or password and when i click login i get HttpErrorResponse with the the following error message "error: {success: false, message: "Invalid email or password!"}" thats great but i get it in my service, how can i pass this error to the login component. (tried with sessionStorage pretty dumb i know...)

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);
            })
      }
    });
  }

Nicholas K · Accepted Answer · 2019-12-15 17:42:57Z

3

Do not subscribe in the auth.service instead return an observable so that it can be subscribed elsewhere. Make the following changes:

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

Instead subscribe from the login.component.ts

login() {

    ...

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

edited Dec 15, 2019 at 17:42

answered Dec 15, 2019 at 17:37

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rumen Over a year ago

Worked great appreciate the help! Thanks a lot.

Collectives™ on Stack Overflow

Angular error message from service pass to component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related