重新路由到带有/用户数据 Angular 2 和 Firebase 的个人资料页面

Posted 2023-02-23

【中文标题】重新路由到带有/用户数据 Angular 2 和 Firebase 的个人资料页面

【英文标题】：Reroute to a profile page w/user data Angular2 and Firebase

【发布时间】：2017-02-08 11:08:08

【问题描述】：

我正在尝试在用户通过 Firebase 登录后设置个人资料页面路由。我的signin 组件包含profile 路由的路径。这里唯一的问题是我的配置文件组件包含来自 Firebase 数据库的用户数据。结果，当我被重定向到我的个人资料页面时，我收到Cannot read property 'uid' of null 的错误。

如果我在登录后刷新页面，那么我的个人资料页面不会出现任何错误。

我的signin.component.ts

  signInSubmit()
    var self = this;
    firebase.auth().signInWithEmailAndPassword(self.signInForm.value.smail, self.signInForm.value.spassword).catch(function(error)
    console.log(error.message);
    );
    localStorage.setItem('confirmo', 'verdad');
    self.router.navigate(['profile']);
  

我的profile.component.ts

ngOnInit()
   var self = this;
   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);

function redis() 
   self.proshow = true; 
   setTimeout(redis, 3000);

为了尝试解决这个问题，我在显示我的个人资料组件之前设置了一个超时。但是，这不起作用。即使我将整个ngOnInit 放入超时函数中，也会出现同样的错误。

另外，如果有帮助，我的 profile.component.html 的一部分。

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

【参考方案1】：

答案竟然是万能的onAuthStateChanged。像这样：

profile.component.ts

ngOnInit()
var self = this;
firebase.auth().onAuthStateChanged(function(user)
if (user) 
var userNamePath = `users/$user.uid/username`;
var notesPath = `users/$user.uid/addnote`;

self.username$ = self.af.database.object(userNamePath);
self.addsnotes$ = self.af.database.list(notesPath);
self.proshow = true;

);