Angular 2 - Angularfire 2 身份验证状态

Question

我迷失在 observables、promises 和 state 的疯狂中。我需要帮助来解决这个问题。

我正在尝试使用 Angularfire2 模块在我的 Angular 2 应用程序中实现注册/登录/注册功能。我从登录功能开始。我得到了基本的工作。我可以登录并重定向到新页面。到目前为止，一切都很好。在我的模板中，我正在检查用户是否登录。麻烦就在这里开始了。我很难检查当前用户是否登录。

Login.components.ts

import { Component, OnInit } from '@angular/core';
import {Validators, FormGroup, FormBuilder } from '@angular/forms';
import { AuthService } from '../auth.service';
import {Router} from '@angular/router';

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

  form: FormGroup;
  error = false;
  errorMessage = '';

  constructor(private fb:FormBuilder, private authService:AuthService, private router:Router) {}

  ngOnInit() {
     this.form = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  onLogin() {
    this.authService.loginUser(this.form.value.email, this.form.value.password)
    .subscribe(
      () => this.router.navigate(['/'])
    )
  }

}

Auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import {FirebaseAuth} from 'angularfire2/index';
import {Observable, Subject} from 'rxjs/Rx';

@Injectable()
export class AuthService {

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

  loginUser(email, password):Observable<any> {
   return this.fromFirebaseAuthPromise(this.auth.login({email,password}));
  }

  logout() {
    this.auth.logout();
    this.router.navigate(['/']);
  }

  fromFirebaseAuthPromise(promise):Observable<any> {
    const subject = new Subject<any>();
    promise
      .then(res => {
        subject.next(res);
        subject.complete();
      },
      err => {
        subject.error(err);
        subject.complete();
      });
    return subject.asObservable();
  }


  isAuthenticated(): Observable<any> {
      const state = new Subject<any>();

      this.auth.subscribe( (user) => {
        if (user) {
          var uid = user.uid;
          console.log('the user id:' + uid)
          state.next(true)
        } else {
          console.log("no user")
          state.next(false)
        }
      })

    return state.asObservable();
  } 
}

home.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth/auth.service';
import { AuthInfo } from './auth/auth-info';

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

  isAuthenticated = false;

  constructor(private authService:AuthService) {
    this.authService.isAuthenticated().subscribe(
        authStatus => this.isAuthenticated = authStatus
    );
   console.log('isAuthenticated:' + this.isAuthenticated);
   }

  isAuth() {
      return this.isAuthenticated;
  }

  onLogout() {
    this.authService.logout();
  }

  ngOnInit() {

  }
}

home.component.html

<h2>
  Please login or register to use the app
</h2>

<a [routerLink]="['/login']" *ngIf="!isAuth()">Login here</a>
<a [routerLink]="['/register']" *ngIf="!isAuth()">Register here</a>

<a *ngIf="isAuth()" (click)="onLogout()" style="cursor: pointer;">Logout</a>

当我在登录时查看我的控制台时，我看到以下结果。

{  
  the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2
  isAuthenticated: false
}

所以我想登录一定要成功吧？但是当我检查身份验证是否为真时，似乎失败了。 HomeComponent 中的 *ngIf="!isAuth()"不起作用，只有当我在浏览器中进行硬刷新时才会起作用。

硬刷新后，我仍然在控制台中看到:

{  
  the user: id:qqsrQHB0SyeIQTbri6sYEyTTE9r2
  isAuthenticated: false
}

Answer 1

你的代码太复杂了，你的代码应该是这样的:

授权服务

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { FirebaseAuth } from 'angularfire2/index';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class AuthService {

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

  loginUser(email, password) {
    return this.auth.login({email,password}) //angularfire returns a promise
  }

  loginUserObservable(email,password){ //but if still want to use an observable
    return Observable.fromPromise(<Promise<any>> this.auth.login({email,password})) // we need to cast the Promise because for some reason Angularfire returns firebase.Promise
  }

  logout() {
    this.auth.logout();
    this.router.navigate(['/']);
  }    

  isAuthenticated(): Observable<any> {
      return this.auth; //auth is already an observable
  } 
}

home.component.ts:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { AuthService } from './auth/auth.service';
import { AuthInfo } from './auth/auth-info';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  private sub: Subscription;

  constructor(private authService:AuthService) { }

  ngOnInit() {
    this.sub = this.authService.isAuthenticated().subscribe(authResp => 
      console.log('isAuthenticated: ', authResp);
    );
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

  isAuth() {
      return this.authService.isAuthenticated();
  }

  onLogout() {
    this.authService.logout();
  }
}

home.component.html

<h2>
  Please login or register to use the app
</h2>

<a [routerLink]="['/login']" *ngIf="!(isAuth() | async)">Login here</a>
<a [routerLink]="['/register']" *ngIf="!(authService.isAuthenticated() | async)">Register here</a>
<!--you can either use !(isAuth() | async) or !(authService.isAuthenticated() | async) it's up to your religion -->

<a *ngIf="isAuth() | async" (click)="onLogout()" style="cursor: pointer;">Logout</a>

我建议您阅读此 simple guide