Question

注意：我是所有这一切的新手，请原谅可能显而易见的事情。任何帮助都非常感谢：）

我有什么

登录和注销的身份验证服务
基于用户ID获取项目的相册服务
- albumList＆gt; UserId＆gt; albumKey
在我的相册列表服务中，我查询路径'albumList＆gt;用户id'
一旦我登录，这完全有效，只返回基于上述匹配查询的结果

问题

如果我要将“localhost：4200 / albums”的网址复制并粘贴到另一个标签中，则控制台会显示

Uncaught（承诺）：TypeError：无法读取null的属性'uid'

因此，不会加载任何内容并且不会保留粘贴的网址

问题

我是否需要在所有组件中添加用户可观察对象？
如何在加载数据前确保检查用户状态？
是否可以将我的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（网址。 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

问题


我是否需要在所有组件中添加用户可观察对象？

是的，您正在使用异步数据，您需要订阅来自firebase的更改

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

你似乎对角度也相对较新，你可能更难一次学习所有东西。您应该检查Router tutorial，更确切地说是module 5 Route Guards。

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

是的，这完全取决于你，这是非常普遍的事情。

对于Type错误，您尝试访问初始化应用程序时不存在的值，因为您异步获取该值需要订阅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是一个空的var，这就是为什么你导航后一切正常，因为之后它已经初始化，你可以订阅它。

因此，由于您依赖于身份验证状态，因此您应该在您的组件上订阅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;
    })
  }
}

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

1 个答案:

修改