AngularFire / Firebase - 检查身份验证状态

Question

注意：我对所有这些都是新手，请原谅可能很明显的内容。非常感谢任何帮助:)

我有什么

• 用于登录和注销的身份验证服务
• 根据用户 ID 获取项目的相册服务
  • albumList > UserId > albumKey
• 在我的专辑列表服务中，我查询路径“albumList > userId”
• 登录后，一切正常，只返回基于上述匹配查询的结果

问题

• 如果我要将“localhost:4200/albums”的 URL 复制并粘贴到另一个选项卡中，控制台会显示

未捕获（承诺中）：TypeError：无法读取 null 的属性“uid”

• 因此，没有加载任何内容，粘贴的 URL 也没有得到维护

问题

• 是否需要在我的所有组件中添加用户 observable？
• 如何确保在加载我的数据之前检查用户状态？
• 是否可以只使用我的 Auth.Service 作为所有其他组件的参考点？

我的身份验证服务

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;


  constructor(
    private firebaseAuth: AngularFireAuth,
    private router: Router) {
    this.user = firebaseAuth.authState;
  }

  login(email: string, password: string) {
    this.firebaseAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log('Nice, it worked!');
        console.log(this.firebaseAuth.auth.currentUser.uid);

        this.router.navigate(['/albums'])
      })
      .catch(err => {
        console.log('Something went wrong:', err.message);
      });
  }

  logout() {
    this.firebaseAuth
      .auth
      .signOut();
  }


}

我的专辑列表服务

注意：如果我删除最后带有用户 ID 的 AlbumList 查询（已注释掉的查询），我可以将 URL 复制并粘贴到新选项卡中，并保留 URL（url. com/专辑）。但是，任何数据都不会首先被用户键过滤。

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ProjectsListService {
  albumList: FirebaseListObservable<any[]>;
  user: Observable<firebase.User>;

  constructor(
    private database: AngularFireDatabase,
    private firebaseAuth: AngularFireAuth) {

    //this.albumList = database.list('/albumList');
    this.albumList = database.list('/albumList/' + this.firebaseAuth.auth.currentUser.uid);
    //console.log(this.firebaseAuth.auth.currentUser.uid);
  }

  getAlbumList() {
    return this.albumList;
    }


}

Answer 1

问题

• 是否需要在我的所有组件中添加用户 observable？

是的，您一直在处理异步数据，您需要订阅来自 firebase 的更改

• 如何确保在加载数据之前检查用户状态？

看来你对 Angular 也比较陌生，你可能很难一次学习所有东西。您应该检查Router tutorial，更准确地说是module 5 Route Guards。

• 是否可以只使用我的 Auth.Service 作为所有其他组件的参考点？

是的，这完全取决于你，这是很常见的事情。

至于类型错误，您正在尝试访问初始化应用程序时不存在的值，因为您需要订阅authState

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ProjectsListService {
  albumList: FirebaseListObservable<any[]>;
  user: Observable<firebase.User>;

  constructor(
    private database: AngularFireDatabase,
    private firebaseAuth: AngularFireAuth
  ) {
      firebaseAuth.authState.subscribe(user => {
        console.log(user);
        if (user) {
          this.albumList = database.list('/albumList/' + user.uid);
        }
      })
  }

  getAlbumList() {
    return this.albumList;
  }
}

编辑

之前的代码不起作用，因为当您第一次运行应用程序时，albumList 是一个空变量，这就是为什么在您导航后一切正常，因为之后它已经初始化并且您可以订阅它。

因此，由于您依赖于身份验证状态，因此您应该在组件上订阅 albumList。为什么？因为如果您的用户出于某种原因退出，您也会隐藏信息。

因此，您无需在组件上使用ProjectsListService，而是执行以下操作：

import { Component } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'

@Component({
  selector: 'your-component',
  template: `<ul><li *ngFor="let album of albumList | async">{{ todo.text }}</li></ul>`
})
export class YOURComponent {
  albumList: FirebaseListObservable<any[]>;

  constructor(
    private fAuth: AngularFireAuth,
    private database: AngularFireDatabase
  ) {
    fAuth.authState.subscribe(user => {
      if (user) {
        this.albumList = database.list('/albumList/' + user.uid);
        return;
      }
      this.albumList = null;
    })
  }
}