Компонент Auth Service и Login не взаимодействует

Question

Я использую Angular 4 и пытаюсь вернуть логическое значение из службы аутентификации, но когда я пытаюсь console.log значение, оно возвращает неопределенное значение.

Я пытаюсь вернуть логическое значениеи сделайте оператор 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 я всегда возвращаю undefined.

Answer 1

Всегда возвращает undefined, потому что вы делаете это в async во время выполнения, а когда данные возвращаются, они уже находятся вне области видимости, лучше вернуть 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)
}

Answer 2

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

Что нужно иметь в виду:

• В Typescript var ключевое слово больше не используется.Вместо этого используйте let или const для переменных, которые никогда не переназначаются.
• Если вы используете TSLint, он будет жаловаться, если вы попытаетесь проверить равенство с помощью оператора двойного равенства ==, попробуйтеиспользуя тройной вместо ===.Он выполнит проверку типа и избавит вас от многих неприятностей, поверьте мне.