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

AngularFire / Firebase - checking the authentication state

注意:我对这一切都是陌生的,请原谅我可能很明显。非常感谢任何帮助:)

我有什么

问题

Uncaught (in promise): TypeError: Cannot read property 'uid' of null

问题

我的授权服务

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/albums)。但是,任何数据都不会首先被用户密钥过滤。

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


}

Questions

  • Do I need to add a user observable in all my components?

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

  • How do I ensure that the user state is checked before loading my data?

看来您对angular也比较陌生,一下子学会所有东西可能会比较困难。你应该检查 Router tutorial, more exactly the module 5 Route Guards

  • Is it possible to just use my Auth.Service as a reference point for all other components?

是的,这完全取决于您,这是很常见的事情。

至于类型错误,您正在尝试访问一个在您初始化应用程序时不存在的值,因为您是异步获取的,所以您需要订阅 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;
    })
  }
}