Блог

Главная - Вопросы по программированию - Перенаправление на страницу, заполненную данными, при входе в систему с помощью Angular2 и Firebase

Перенаправление на страницу, заполненную данными, при входе в систему с помощью Angular2 и Firebase

#angular #firebase #firebase-realtime-database

#angular #firebase #firebase-база данных в реальном времени

Вопрос:

Прямо сейчас у меня есть проект 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 пользователей (например, их имя пользователя). Моя проблема в том, что пользовательские данные не заполняются к моменту перенаправления пользователя. Они должны обновить страницу, чтобы увидеть ее заполнение.

My 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 это null. Но опять же, это не проблема, если я просто обновлю страницу. Как я могу получить и вывести данные пользователя при повторном маршруте? Я также готов рассмотреть вариант обновления страницы, хотя я не уверен, как перейти к отдельному маршруту в Angular 2.

Комментарии:

1. Что происходит, когда вы используете setTimeout функцию для user данных

2. После установки тайм-аута для всего внутри моего ngOnInit он все равно возвращает ошибку после их запуска.

Ответ №1:

Проблема в том, что вы перенаправляете сразу после попытки входа с вашими учетными данными. Вам нужно дождаться успешного входа, прежде чем вы захотите изменить маршрут.

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