使用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进行管道访问。问题是我似乎无法获得在auth.subscribe，我的应用程序中的任何其他地方（特别是在HTML）中获得的用户数据的引用。

我可以console.log订阅用户，这证实我正在获取数据。

请改正我的理解或教我如何访问这些数据，我对于Typescript和Observable这两个概念来说，这是非常新颖的东西。

Javascript Angular 2 Component

 导出类AppComponent {
 title ='Webroot'; 
 user：FirebaseObjectObservable< any>; 
构造函数（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！）
} 
}）; 
 
 
 code 
 $ b $ p 
 
 
 
 
 
 
 < div> {{（user | async | json）}}< / div> 
  
 
 
解决方案
使用箭头函数 => ; 保存这个关键字：
 导出类AppComponent {
 title ='Webroot'; 
 user：FirebaseObjectObservable< any>; 
构造函数（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！）
} 
}）; 
 
 
 $ / code $ / pre 
 
 
你可以做得更好：
 
 
 $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ getUser（）{
 return this.af.auth.switchMap（（auth）=> {
 return this.af.database.object（users /+ auth.uid）
 }）; 
} 
} 
 
 
 
导出类AppComponent {
 title ='Webroot'; 
 user：FirebaseObjectObservable< any>; 
构造函数（public userService：UserService）{
 this.userService 
 .getUser（）
 .subscribe（user => console.log（user））; 
 
 
 
 
 $ b $ p $使用$ codehangeDetectorRef 强制angular更新视图：
 
 pre $ import $ {@ angular / core'; {ChangeDetectorRef};} 
 
构造函数（private af：AngularFire，public userService：UserService，private ref：ChangeDetectorRef）{} 
 $ b $ init（）{
 this.userPublic =Init ; 
 af.auth.subscribe（（auth）=> {
 if（auth！= null）{
 this.getData（auth）; 
 this.userPublic =Finish ; 
 this.ref.detectChanges（）; 
} 
 else {
 // ... 
} 
}）; 
 
} 
} 
  
 
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屋！