使用Angular2和Firebase登录时路由到数据填充页面

debugcn 发表于 Dev

亚伯拉罕linkedin

现在，我有一个Angular 2项目，该项目采用用户的登录凭据，并将用户重新路由到我的个人资料组件。

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代表具有用户Firebase数据（例如其用户名）的页面。我的问题是，在用户重定向时，用户数据没有被填充。他们必须刷新页面才能看到它。

我的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中刷新到单独的路由。

卡列布

问题在于，尝试使用凭据登录后，您将立即重定向。您需要先等待登录成功，然后才能重新路由。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。