How to use Angular Observable

Question

I have got problem with getting user information using http request to my rest api server, I don't know what is wrong....

When user click on login button, Angular send request to server with username and password, if is correct it returns user info else it returns null. Problem is that variable user in user service is still null though the username and password are correct.

I don't know how to solve this problem, so if you help me I will be happy ! Thank for any help.

REST API:

package cz.flay.fellcms.http;

import cz.flay.fellcms.dao.UsersRepository;
import cz.flay.fellcms.entities.User;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@CrossOrigin
@RestController
@RequestMapping(path = "/api/users")
public class UsersRestController {

    @Autowired
    private UsersRepository usersRepository;
    Logger logger = LoggerFactory.getLogger(UsersRestController.class);

    @CrossOrigin
    @GetMapping(path = "/all")
    public @ResponseBody Iterable<User> getAll(){
        return usersRepository.findAll();
    }

    @CrossOrigin
    @GetMapping(path = "/verify", params = {"username", "password"})
    public @ResponseBody User verify(@RequestParam(value = "username") String username, @RequestParam(value = "password") String password){
        logger.info("t");
        return usersRepository.verify(username, password);
    }
}

User Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../entities/User';

@Injectable()
export class UserService {

  private usersUrl: 'http://localhost:8080/api/users';

  user: User;
  verifyUrl: string;

  constructor(private http: HttpClient) {}

  isLoggedIn() {
    return this.user != null;
  }

  isAdmin() {
    return this.user.isAdmin;
  }

  unLoggin() {
    this.user = null;
  }

  login(username: string, password: string) {
    this.verifyUrl = 'http://localhost:8080/api/users/verify?username=' + username + '&password=' + password;
    this.http.get<User>(this.verifyUrl).subscribe(data => this.user = data);
    if (this.user != null) {
      return true;
    } else {
      return false;
    }
  }

}

Possible duplicate of [angular 2 how to return data from subscribe](https://stackoverflow.com/questions/39295854/angular-2-how-to-return-data-from-subscribe) — jonrsharpe, Dec 13 '17 at 16:36
Or various others with different angles. **HTTP methods are asynchronous**, hence the use of observables and the need to `.subscribe`. Please read https://angular.io/guide/http — jonrsharpe, Dec 13 '17 at 16:37
Also, this is all wrong. Move http stuff to a service. Move username and pwd to body, not url. Do not store them, even locally on that `verifyUrl`. Get that REST service RESTfull. Etc etc etc. — Zlatko, Dec 13 '17 at 16:40

score 0 · Accepted Answer · answered Dec 13 '17 at 16:38

You're calling if (this.user !== null) too soon. That evaluation will get called before the request goes away and back. Try this:

login(username: string, password: string) {
    this.verifyUrl = `http://localhost:8080/api/users/verify?username=${username}&password=${password}`;
    return this.http.get<User>(this.verifyUrl)
        .map(data => {
            this.user = data
            if (this.user != null) {
               return true;
            } else {
                return false;
            }
        });
}

The thing is though, wherever you call this login method, it's now an observable you have to subscribe to, not a sync method.

How to use Angular Observable

1 Answers1