AngularFire/Firebase - 检查身份验证状态 [英] AngularFire / Firebase - checking the authentication state

问题描述

注意:我对这一切都不熟悉，请原谅可能显而易见的事情.非常感谢任何帮助:)

Note: I'm new to all of this, please excuse what might be obvious. Any help is massively appreciated :)

我有什么

• 用于登录和注销的身份验证服务
• 根据用户 ID 获取项目的专辑服务
  • albumList > UserId > albumKey

  问题

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

  未捕获(承诺):类型错误:无法读取 null 的属性 'uid'

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

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

  问题

  • 我是否需要在我的所有组件中添加一个用户可观察对象?
  • 如何确保在加载数据之前检查用户状态?
  • 是否可以仅使用我的 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 的专辑列表查询(已注释掉的查询)，我可以将 URL 复制并粘贴到新选项卡中，并保留该 URL (url.com/专辑).但是，任何数据都不会首先通过用户键进行过滤.

  note: If i remove the albumList query with the user id on the end (commented out query), I can copy and paste the URL into a new tab and the URL is maintained (url.com/albums). However, any data won't be filtered by the user key first.

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

  推荐答案

  问题

  • 我是否需要在我的所有组件中添加一个用户可观察对象?

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

  Yes, you are working with async data all the time, you need to subscribe to the changes coming from the firebase

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

  看来你对 angular 也比较陌生，你可能很难一次性学会所有东西.您应该查看路由器教程，更准确地说是模块 5 Route Guards.

  It seems that you are also relatively new to angular, it might be harder for you to learn everything at once. You should check the Router tutorial, more exactly the module 5 Route Guards.

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

  是的，这完全取决于您，这是很常见的事情.

  Yes, that's entirely up to you and it's a very common thing.

  至于 Type 错误，您尝试访问初始化应用程序时不存在的值，因为您异步获取该值，因此您需要订阅 authState

  As for the Type error, you are trying to accessing a value that doesn't exist when you initialize your app, since you get that asynchronously you need to subscribe to the 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;
    }
  }
  

  编辑

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

  Edit

  The previous code didn't work, because when you first run your app, the albumList is an empty var, that's why after you navigate everything works fine, because after that it's already initialised and you can subscribe to it.

  因此，因为您依赖于 auth 状态，所以您应该订阅您的组件上的 albumList.为什么?因为如果你的用户因为某种原因退出，你也会隐藏信息.

  So because you depend on the auth state you should be subscribing to your albumList on your components instead. Why? Because if your user for some reason logs out, you also hide the information.

  因此，不是在您的组件上使用 ProjectsListService，您将执行以下操作:

  So instead of using ProjectsListService on your component you will do something like this:

  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 - 检查身份验证状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！