How can I make Angular HTTP Post wait for node js response

Question

i am new to Angular/Node JS, and I am doing a project for university where I am trying to implement authorization/authentication in my frontend and backend.

So I made the method Login in the Node JS and testing with postman the response is what I want. But when I send call the method login in the Angular it doesnt return anything.

Using debug I could observe that the angular doesnt await for the response of Node JS, how can I make it only continue when the response arrives?

Node JS Method

exports.cliente_login = function (req, res){
    let cliente = transform.ToLogin(req);
    service.ClienteLogin(cliente, function (cliente, erro) {
        if (cliente) {
            res.json(cliente);
        } else {
        return res.send(erro);
        }
    })

Angular Service Method

loginCliente(cliente): Observable<Cliente> {
    return this.http.post<Cliente>(this.myAppUrl + this.myApiUrl + 'login', JSON.stringify(cliente), this.httpOptions)
      .pipe(
        retry(1),
        catchError(this.errorHandler)
      );
  }

Angular Auth Method

login(email: string, password: string) {
    let user: any;
    let userLogin = new UserToLogin();
    userLogin.email = email;
    userLogin.password = password;

    user =  this.clienteService.loginCliente(userLogin);
    if (user && user.token) {
      // store user details and jwt token in local storage to keep user logged in between page refreshes
      localStorage.setItem('currentUser', JSON.stringify(user));
      this.currentUserSubject.next(user);
    }

    return user;
  }

Thank you for your help !

score 0 · Answer 1 · answered Jan 04 '20 at 13:41

You may need to subscribe to your http output since it's an observable:

Auth Method:

login(email: string, password: string) {
    let user: any;
    let userLogin = new UserToLogin();
    userLogin.email = email;
    userLogin.password = password;

    this.clienteService.loginCliente(userLogin).subscribe((user) => {
          if (user && user.token) {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('currentUser', JSON.stringify(user));
            this.currentUserSubject.next(user);
         }

         return user;
      });
  }

score 0 · Accepted Answer · answered Jan 04 '20 at 13:42

Angular HTTPClient is based on observables. The request will only trigger when you subscribe to it.

login(email: string, password: string) {
    let user: any;
    let userLogin = new UserToLogin();
    userLogin.email = email;
    userLogin.password = password;

    this.clienteService.loginCliente(userLogin).subscribe(user => {

        if (user && user.token) {
        // store user details and jwt token in local storage to keep user logged in between page refreshes
        localStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
    }
    });

    // You cannot return user here, as it is only available inside your subscribe block which is running asynchronously
    // return user;
}

How can I make Angular HTTP Post wait for node js response

2 Answers2