身份验证服务和登录组件未通信

Question

我正在使用 Angular 4 并尝试 return 来自 Auth 服务的布尔值，但是当我尝试 console.log 值时，它 returns未定义。

我正在尝试 return 布尔值并创建一个 if/else 语句将登录的用户重定向到仪表板。

我的代码如下：

login.component.ts

import { ModuleWithProviders } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../auth/auth.service';

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

  constructor(
    private auth: AuthService,
    private router: Router
  ) { }

  ngOnInit() {
  }

  onSubmit(formData) {
    if(formData.valid) {
      var req = this.auth.isLoggedIn(formData.value.email, formData.value.password);
      if (req == true){
        this.router.navigate([ '/dashboard' ]);
      } else {
        alert("Login wasn't successful");
      }
    }
  }

}

auth.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

@Injectable()
export class AuthService {
  private _Url = 'http://localhost:3000/api/login';

  constructor(private http: HttpClient) {}

  isLoggedIn(email, password) {
    var data = {
      email: email,
      password: password
    };

    var req = this.http.post(this._Url, data)
    .subscribe(
      res => {return res['success'];},
      err => {return err['error']['success'];}
    );

  }

}

此外，在登录组件上我收到一个错误消息“运算符‘==’无法应用于类型 'void' 和 'boolean'。

但我们不要专注于此，因为即使没有 if/else 条件，我也总是 returning undefined。

Answer 1

您的 isLoggedIn() 方法实际上 return 没有任何作用。您在 .subscribe 中的 return 实际上是 return 对该方法的响应，但该方法并未 return 外部值。我会这样写：

isLoggedIn(email, password): Observable<any> {
    const data = {
      email: email,
      password: password
    };
    return this.http.post(this._Url, data);
  }

然后在你的login.component.ts

onSubmit(formData) {
    if (formData.valid) {
      this.auth.isLoggedIn(formData.value.email, formData.value.password).subscribe( res => {
        if (res) {
          this.router.navigate(['/dashboard']);
        } else {
          alert("Login wasn't successful");
        }
      });
    }
  }

注意事项：

在 Typescript 中 var 关键字不再使用。使用 let 代替，或 const 用于永远不会重新分配的变量。
如果您正在使用 TSLint，如果您尝试使用双重相等运算符 == 检查相等性，它会报错，请尝试使用三重运算符 ===。它将执行类型检查并为您省去很多麻烦，相信我。

Answer 2

它总是 returning undefined 因为你在 async 中执行它并且当数据被 returned 时它已经超出范围，更好的是 return Observable 而不是数据。

这样做

login.component.ts

onSubmit(formData) {
     if(formData.valid) {
         this.auth.isLoggedIn(formData.value.email,  formData.value.password)
         .subsribe((res) =>{
             this.router.navigate([ '/dashboard' ]); 
          },
         (err) =>{
            //do your error logic here
            alert("Login wasn't successful");
         });
     }
}

auth.service.ts

isLoggedIn(email, password) {
    let data = {
      email: email,
      password: password
    }; 
   return this.http.post(this._Url, data)
}

身份验证服务和登录组件未通信

Auth Service and Login Component not communicating

authentication

angular-services

angular-components

angular

auth-guard

login.component.ts

auth.service.ts