0

我正在使用 Angular 4 并尝试从 Auth 服务返回一个布尔值，但是当我尝试 console.log 该值时，它返回未定义。

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

我的代码如下：

登录组件.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 条件，我总是返回未定义的。

4

2 回答 2

1

你的isLoggedIn()方法实际上并没有返回任何东西。return您实际上已将响应返回给该.subscribe方法，但该方法并未在外部返回此值。我会这样写：

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

要记住的事情：

  • 在 Typescriptvar中不再使用关键字。改为使用let，或const用于从未重新分配的变量。
  • 如果您正在使用TSLint它，如果您尝试使用 double equal operator 检查是否相等==，请尝试使用 Triple 代替===。它将执行类型检查，让您免于很多麻烦，相信我。
于 2018-04-25T21:21:16.130 回答
0

它总是返回undefined，因为您async在执行时执行它并且返回数据时它已经超出范围，最好返回Observable而不是数据。

这样做

登录组件.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");
         });
     }
}

身份验证服务.ts

isLoggedIn(email, password) {
    let data = {
      email: email,
      password: password
    }; 
   return this.http.post(this._Url, data)
}
于 2018-04-26T01:44:44.437 回答