Angular firebase身份验证服务-用户始终未定义

我正在尝试在Angular应用程序中设置基本身份验证，我有我的firebase服务，该服务订阅身份验证更改，并且有一个在提交表单时在我的登录组件中调用的函数

当使用正确的凭证时，

loggedIn

始终返回以下未定义的值

z{a:0，i:undefined，c:z，b:null，f:null，…}

，如果您使用错误信息填写表单，emailLogin函数将按预期执行并在控制台中记录错误。我不明白为什么“firebaseUser”没有返回任何可供我使用或至少可以看到的内容。我是Angular 2和firebase的新手，因此无法100%确定问题所在，无论是我的组件、服务还是firebase本身。在这件事上的任何帮助都将不胜感激。我在服务和组件中的所有代码如下所示：

angularfire.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/observable';

import { UsersInterfaces } from '../users';

@Injectable()
export class AngularfireService {

    private users: Observable<UsersInterfaces.User>;

    public authState: any = null;

    public authError: any = null;

  constructor(private db: AngularFireDatabase, private fbAuth: AngularFireAuth) {
    // this.users = ;

    this.fbAuth.authState.subscribe((auth) => {
      this.authState = auth;
    })

  }

  public get allUsers() {
    return this.db.list('users').valueChanges();
  }

  public emailLogin(email: string, password: string){
    return this.fbAuth.auth.signInWithEmailAndPassword(email, password)
    .then((fireBaseUser) =>{
      this.authState = fireBaseUser;
    })
    .catch(error => {
        if (error.code === 'auth/invalid-email' || error.code === 'auth/wrong-password' || error.code === 'auth/user-not-found') {
            this.authError = 'The username and password you entered did not match our records. Please double-check and try again.';
        } else if (error.code === 'auth/user-disabled') {
            this.authError = 'Your account has been suspended. Please contact us directly to discuss this.';
      } else{
        this.authError = error.message;
      }
      console.log('Error: ',this.authError);
    })
  }

}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { AngularfireService } from '../core/angularfire/angularfire.service';

import { UsersInterfaces } from '../core/users';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

export class LoginComponent {

  public form: FormGroup;

  private users: UsersInterfaces.User[];

    constructor(private fb: FormBuilder, private firebaseService: AngularfireService) {
        this.form = this.fb.group({
            email: '',
            password: ''
        })
    }

    public onSubmit(e) {

        const email = this.form.value.email;
        const password = this.form.value.password;

        const loggedIn = this.firebaseService.emailLogin(email,password);

        console.log(loggedIn)
    }

}

@Output() public authState: EventEmitter<any> = new EventEmitter();

@Output() public authError: EventEmitter<any> = new EventEmitter();

public emailLogin(email: string, password: string) {
    this.fbAuth.auth.signInWithEmailAndPassword(email, password)
      .then((fireBaseUser) => {
        this.authState.emit(fireBaseUser);
      })
      .catch(error => {
          if (error.code === 'auth/invalid-email' || error.code === 'auth/wrong-password' || error.code === 'auth/user-not-found') {
              this.authError.emit('The username and password you entered did not match our records. Please double-check and try again.');
          } else if (error.code === 'auth/user-disabled') {
              this.authError.emit('Your account has been suspended. Please contact us directly to discuss this.');
          } else {
            this.authError.emit(error.message);
          }
      });
  }

constructor(private fb: FormBuilder, private firebaseService: AngularfireService) {
        this.form = this.fb.group({
            email: '',
            password: ''
        });

        this.firebaseService.authState.subscribe(user => console.log(user));
        this.firebaseService.authError.subscribe(error => console.log(error));

    }

---

解决了！将

authState

和

authror

更改为

EventEmitters

，只需在登录组件中订阅这些值。这一切最终将被移动到一个不同的地方，并正确处理，但无论如何，为了证明这一切的概念伟大

angularfire.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/observable';

import { UsersInterfaces } from '../users';

@Injectable()
export class AngularfireService {

    private users: Observable<UsersInterfaces.User>;

    public authState: any = null;

    public authError: any = null;

  constructor(private db: AngularFireDatabase, private fbAuth: AngularFireAuth) {
    // this.users = ;

    this.fbAuth.authState.subscribe((auth) => {
      this.authState = auth;
    })

  }

  public get allUsers() {
    return this.db.list('users').valueChanges();
  }

  public emailLogin(email: string, password: string){
    return this.fbAuth.auth.signInWithEmailAndPassword(email, password)
    .then((fireBaseUser) =>{
      this.authState = fireBaseUser;
    })
    .catch(error => {
        if (error.code === 'auth/invalid-email' || error.code === 'auth/wrong-password' || error.code === 'auth/user-not-found') {
            this.authError = 'The username and password you entered did not match our records. Please double-check and try again.';
        } else if (error.code === 'auth/user-disabled') {
            this.authError = 'Your account has been suspended. Please contact us directly to discuss this.';
      } else{
        this.authError = error.message;
      }
      console.log('Error: ',this.authError);
    })
  }

}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { AngularfireService } from '../core/angularfire/angularfire.service';

import { UsersInterfaces } from '../core/users';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

export class LoginComponent {

  public form: FormGroup;

  private users: UsersInterfaces.User[];

    constructor(private fb: FormBuilder, private firebaseService: AngularfireService) {
        this.form = this.fb.group({
            email: '',
            password: ''
        })
    }

    public onSubmit(e) {

        const email = this.form.value.email;
        const password = this.form.value.password;

        const loggedIn = this.firebaseService.emailLogin(email,password);

        console.log(loggedIn)
    }

}

@Output() public authState: EventEmitter<any> = new EventEmitter();

@Output() public authError: EventEmitter<any> = new EventEmitter();

public emailLogin(email: string, password: string) {
    this.fbAuth.auth.signInWithEmailAndPassword(email, password)
      .then((fireBaseUser) => {
        this.authState.emit(fireBaseUser);
      })
      .catch(error => {
          if (error.code === 'auth/invalid-email' || error.code === 'auth/wrong-password' || error.code === 'auth/user-not-found') {
              this.authError.emit('The username and password you entered did not match our records. Please double-check and try again.');
          } else if (error.code === 'auth/user-disabled') {
              this.authError.emit('Your account has been suspended. Please contact us directly to discuss this.');
          } else {
            this.authError.emit(error.message);
          }
      });
  }

constructor(private fb: FormBuilder, private firebaseService: AngularfireService) {
        this.form = this.fb.group({
            email: '',
            password: ''
        });

        this.firebaseService.authState.subscribe(user => console.log(user));
        this.firebaseService.authError.subscribe(error => console.log(error));

    }

---

它返回未定义，因为带有EmailAndPassword的登录是异步的。事实上，你应该观察到国家的变化。@CristianoAndalóTenuta是的，在离开这个项目一段时间，再仔细思考之后，我也意识到了这一点。我很愚蠢，但还是暂时解决了！谢谢你！