使用Angular2和Firebase登錄數據填充頁面的路徑

現在我有一個Angular 2項目，它需要用戶的登錄憑證，並將用戶重新路由到我的配置文件組件。使用Angular2和Firebase登錄數據填充頁面的路徑

home.component.ts

constructor(public router: Router){} 
    signInSubmit(){ 
    var self = this; 
    firebase.auth().signInWithEmailAndPassword(self.signInForm.value.smail, self.signInForm.value.spassword).catch(function(error){ 
    console.log(error.message); 
    }); 
    self.router.navigate(['profile']); 
    }

其中profile表示與用戶的火力地堡數據的頁面（例如，他們的用戶名）。我的問題是用戶數據未被用戶重定向時填充。他們必須刷新頁面才能看到它填充。

我profile.component.ts

export class ProfileComponent implements OnInit { 
private addsnotes$: FirebaseListObservable<string[]>; 
private username$: FirebaseObjectObservable<string>; 
addForm: FormGroup; 

constructor(private af: AngularFire){} 

ngOnInit(){ 
    let user = firebase.auth().currentUser; 
    let userNamePath = `users/${user.uid}/username`; 
    let notesPath = `users/${user.uid}/addnote`; 

    this.username$ = this.af.database.object(userNamePath); 
    this.addsnotes$ = this.af.database.list(notesPath); 
} 
}

我profile.component.html

<h4>Welcome {{ (username$ | async)?.$value }}</h4>

當我重定向到我的個人資料的路線，據我所知，user爲空。但是，如果我只是刷新頁面，這也不是問題。我如何檢索並輸出用戶的重新路由數據？我也願意考慮頁面刷新選項，但我不確定如何刷新到Angular 2中的單獨路由。

來源

2016-09-29 abrahamlinkedin

當您使用的'user'數據 –

一個'setTimeout'功能對我ngOnInit內的一切設置超時之後會發生什麼，一旦被啓動，那麼，仍然會返回一個錯誤。 – abrahamlinkedin

問題是您嘗試使用憑據登錄後立即重定向。您需要等待登錄才能成功，然後才能重新路由。

signInWithEmailAndPassword是承諾基於呼叫，也成功呼叫後返回用戶信息。所以，你可以這樣做：

firebase.auth().signInWithEmailAndPassword(
    self.signInForm.value.smail, 
    self.signInForm.value.spassword 
) 
    .then((userInfo) => { 
    // Login was successful, NOW redirect 
    self.router.navigate([ 'profile' ]); 
    }) 
    .catch((error) => { 
    // Do something, such as report the error on your sign in page 
    });

來源

2016-10-03 05:18:25 Caleb

使用Angular2和Firebase登錄數據填充頁面的路徑

回答

相關問題