使用AngularFire2訪問認證數據

我在Angular2項目中使用AngularFire2來完成一項非常基本的任務，登錄並在頁面上顯示登錄的用戶信息。使用AngularFire2訪問認證數據

我碰到的看似簡單的障礙是我需要知道用戶UID從Firebase請求數據（我的權限狀態只能使用自己的UID訪問「/ users」中的密鑰 - 非常標準）。

我發現爲了獲得UID我需要訂閱af.auth observable，然後在那裏請求用戶數據使用af.auth.uid - 我已經成功完成了。

我也注意到af.database.object創建了另一個observable，我理論上可以通過在我的HTML中使用Asyc進行管道訪問。問題是我似乎無法獲得對auth.subscribe，我的應用程序中任何其他位置（特別是HTML）中獲得的用戶數據的引用。

我可以console.log訂閱用戶，這證實我正在獲取數據。

請改正我的理解或教我怎樣才能訪問這些數據，我對打字稿和觀察對象的概念非常陌生。

的Javascript角2組件

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>

來源

2017-03-14 Alex Harper

使用箭頭功能=>保持this關鍵字：

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!") 
      } 
     }); 
     } 
    }

你可以做的更好：

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

使用ChangeDetectorRef逼角更新視圖：

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{ 
      //... 
      } 
     }); 

} 
}

來源

2017-03-14 14:24:25

Gahhh！我血腥地知道這是做這個用戶沒有引用正確的屬性，但我只是無法弄清楚如何讓它流出。我甚至有一個箭頭函數開始，但爲了清晰起見，我改變了一個annom函數（新的箭頭函數 - 事實證明它和我以前一直相信的不一樣）。作品，感謝隊友！花了4個小時太多，試圖瞭解到底是怎麼回事，爲什麼我不能引用正確的this.user實例！傳說！ –

我也是ES6的新手，歡迎您 –

我一直在爲uid創建一個FirebaseAuthState對象，並在需要從數據庫中獲取用戶信息時將其插入到路徑中，但我喜歡這種方式依賴於單個子數據庫。雖然這裏發生了一些奇怪的事情。如果我像這樣分配'getUser（）'：'getUser（）。subscribe（user => this.user = user）'，然後試圖訂閱那個可觀察的'this.user.subscribe（user => console。日誌（用戶））'，this.user是未定義的。 –

使用AngularFire2訪問認證數據

回答

相關問題