如何使用 Angular Observable

Question

我在使用 http 请求获取用户信息到我的 rest api 服务器时遇到问题，我不知道出了什么问题....

当用户单击登录按钮时，Angular 将使用用户名和密码向服务器发送请求，如果正确则返回用户信息，否则返回 null。 问题是尽管用户名和密码正确，但用户服务中的变量 user 仍然为空。

我不知道如何解决这个问题，所以如果你帮助我，我会很高兴！ 感谢您的帮助。

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

用户服务

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

}

Answer 1

您if (this.user !== null)调用if (this.user !== null) 。 该评估将在请求消失和返回之前被调用。 试试这个：

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

问题是，无论您在何处调用此login方法，它现在都是您必须订阅的 observable，而不是同步方法。