Question

我的angular 7应用程序正在端口4200上使用ng serve运行。我有一个节点服务器在docker容器内部运行，该容器位于localhost：8081。

我已使用邮递员验证服务器已启动并且可以访问。网址为localhost:8081/login。提交POST请求时，我能够收到预期的数据。

当我单击login.html表单中的登录按钮时，它将从登录组件类中调用onSubmit()。这会调用login()，然后从身份验证服务中调用一个函数，该功能会向localhost:8081/login创建POST请求。

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AuthenticationService } from 'src/app/services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private authenticationService: AuthenticationService) { }

  loginForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  ngOnInit() {
  }

  // Called when login form submits
  onSubmit() {
    this.login();
  }

  login() : void {
    this.authenticationService.login(this.loginForm.controls.email.value, this.loginForm.controls.password.value);
  }

}

authentication.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { User } from '../models/user';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  private currentUserSubject: BehaviorSubject<User>;
  private currentUser: Observable<User>;

  constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();
  }

  public get currentUserValue(): User {
    return this.currentUserSubject.value;
  }

  login(email: string, password: string) {
    return this.http.post<any>('localhost:8081/login', {email, password})
      .pipe(map(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;
    }));
  }

  logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(null);
  }
}

最后，我的节点服务器的端点被调用。

account.js

// Verifies that the email and password exist in the database.
app.post('/login', (req, res) => {
    console.log("in login post");
    res.json({ firstName: 'test', lastName: 'user', email: 'test@gmail.com', password: 'pass' });
});

我删除了其他逻辑，以便可以用最简单的情况进行测试；只是返回硬编码的值。

当我向邮递员发出请求时，我看到记录了“在登录中”。但是，当我从Angular发出请求时，未记录“在登录后”。

为什么我不能从Angular到达终点，但可以从邮递员到达终点？地址和端口相同。

Answer 1

可观察到的Rxjs在默认情况下是冷的，这意味着它们仅在订阅时执行。

在您LoginComponent#login中，您应该订阅请求，即使没有操作，您的请求也将被发送到后端

Answer 2

在login.component.ts中使用登录服务方法时，您必须订阅它。

例如：

login() : void {
    this.authenticationService.login(this.loginForm.controls.email.value, this.loginForm.controls.password.value).subscribe();
  }

Answer 3

如@Austaras所述，Observable必须至少具有一个活动订阅才能执行。

您必须在login()中订阅AuthenticationService的{{1}}方法

LoginComponent

详细了解Observables

Angular 7 HttpClient发布请求未发送到nodejs服务器

3 个答案: