使用 AngularFire2 访问经过身份验证的数据 [英] Access authenticated data with AngularFire2

问题描述

我在 Angular2 项目中使用 AngularFire2 来完成一个非常基本的任务，登录然后在页面上显示登录的用户信息.

我遇到的看似简单的问题是，我需要知道用户 UID 才能从 Firebase 请求数据(我的权限状态只能使用自己的 UID 访问/users"中的密钥 - 非常标准).

我发现为了获得 UID，我需要订阅 af.auth observable，然后在那里使用 af.auth.uid 请求用户数据 - 我已经成功完成了.

我还注意到 af.database.object 创建了另一个 observable，理论上我可以通过在我的 HTML 中使用 Asyc 进行管道访问.问题是我似乎无法在我的应用程序的任何其他地方(特别是在 HTML 中)引用 auth.subscribe 中获得的用户数据.

我可以控制台.log 用户的订阅，这确认我正在获取数据.

请纠正我的理解或教我如何访问这些数据，我对 Typescript 和 Observables 的概念非常陌生.

Javascript Angular 2 组件

导出类 AppComponent {title = 'Webroot';用户:FirebaseObjectObservable；构造函数(公共AF:AngularFire){af.auth.subscribe(功能(身份验证){if(auth != null){this.user = af.database.object("users/"+auth.uid)this.user.subscribe(user => console.log(user));}别的{console.log("身份验证为空！")}});}}

HTML

{{ (user | async | json) }} </div>

解决方案

使用箭头函数=>保留this关键字:

 导出类 AppComponent {title = 'Webroot';用户:FirebaseObjectObservable；构造函数(公共AF:AngularFire){af.auth.subscribe((auth)=>{if(auth != null){this.user = af.database.object("users/"+auth.uid)this.user.subscribe(user => console.log(user));}别的{console.log("身份验证为空！")}});}}

你可以做得更好:

 @Injectable()类用户服务{构造函数(私有 af:AngularFire){}获取用户(){返回 this.af.auth.switchMap((auth)=>{return this.af.database.object("users/"+auth.uid)});}}导出类 AppComponent {title = 'Webroot';用户:FirebaseObjectObservable；构造函数(公共用户服务:用户服务){this.userService.getUser().subscribe(user => console.log(user));}}

使用 ChangeDetectorRef 强制 angular 更新视图:

import { ChangeDetectorRef } from '@angular/core';构造函数(私有 af:AngularFire，公共 userService:UserService，私有引用:ChangeDetectorRef){}在里面(){this.userPublic = "初始化";af.auth.subscribe((auth)=>{if(auth != null){this.getData(auth);this.userPublic = "完成";this.ref.detectChanges();}别的{//...}});}}

I am using AngularFire2 in an Angular2 project to do a very basic task, login and then show the logged in users information on the page.

The seemingly simple snag I've hit is that I need to know the users UID to request that data from Firebase (my permissions state can only access key inside "/users" with own UID - pretty standard).

I discovered in order to get the UID I need to subscribe to the af.auth observable and then inside there request the user data using af.auth.uid - which I've done successfully.

I've also noted that af.database.object creates another observable, which I can in theory access by piping with Asyc in my HTML. Issue is I can't seem to be able to get reference to the user's data obtained in the auth.subscribe, anywhere else in my App (specifically in the HTML).

I can console.log the subscribe of the user, which confirms I am getting the data.

Please correct my understanding or teach me how I can access this data, I am very very new to the concepts of Typescript and Observables.

Javascript Angular 2 Component

export class AppComponent {
  title = 'Webroot';
  user: FirebaseObjectObservable<any>;
  constructor(public af: AngularFire) {
    af.auth.subscribe(function(auth){
      if(auth != null){
        this.user = af.database.object("users/"+auth.uid)
        this.user.subscribe(user => console.log(user));
      }
      else{
        console.log("Auth is Null!")
      }
    });
  }
}

HTML

<div> {{ (user | async | json) }} </div>

解决方案

use arrow function => to preserve this keyword:

 export class AppComponent {
      title = 'Webroot';
      user: FirebaseObjectObservable<any>;
      constructor(public af: AngularFire) {
        af.auth.subscribe((auth)=>{
          if(auth != null){
            this.user = af.database.object("users/"+auth.uid)
            this.user.subscribe(user => console.log(user));
          }
          else{
            console.log("Auth is Null!")
          }
        });
      }
    }

you can do better :

 @Injectable()
  class UserService{
     constructor(private af: AngularFire) {}

     getUser(){
         return this.af.auth.switchMap((auth)=>{
            return this.af.database.object("users/"+auth.uid)
         });
     }
}



export class AppComponent {
      title = 'Webroot';
      user: FirebaseObjectObservable<any>;
      constructor(public userService: UserService) {
        this.userService
            .getUser()
            .subscribe(user => console.log(user));
      }
    }

use ChangeDetectorRef to force angular to update the view :

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

constructor(private af: AngularFire,public userService: UserService,private ref: ChangeDetectorRef) { }

 init(){
   this.userPublic = "Init";
   af.auth.subscribe((auth)=>{
          if(auth != null){
            this.getData(auth);
            this.userPublic = "Finish";
            this.ref.detectChanges(); 
          }
          else{
            //...
          }
        });

 }
}

这篇关于使用 AngularFire2 访问经过身份验证的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！