Как использовать onAuthStateChanged в Firebase для отслеживания состояния входа пользователя в Angular?

Question

Я настроил поток входа пользователя в систему с помощью Firebase и теперь пытаюсь защитить страницы от доступа, когда пользователь не вошел в систему. Из документов Firebase я знаю, что могу отслеживать пользователя войдите в систему с onAuthStateChanged, но я не уверен, что включить в эту функцию, которая позволила бы мне определить, вошел ли пользователь в систему от охраны маршрута. Как вы можете отслеживать состояние входа с помощью onAuthStateChanged?

Edit:

Если быть более точным, я не уверен, как направить маршрутизатор при вызове onAuthStateChanged. Я попытался позвонить на введенный маршрутизатор

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private afAuth: AngularFireAuth,
    private router: Router,
  ) {
    this.afAuth.auth.onAuthStateChanged(function(user) {
      if (user) {
        this.router.navigate('home');
      } else {
        this.router.navigate('login');
      } 
    });
  }
}

но когда вызывается onAuthStateChanged, я получаю сообщение о том, что this.router не определено.

Answer 1

Я понял, что проблема связана с анонимной функцией. Использование синтаксиса => решает проблему.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private afAuth: AngularFireAuth,
    private router: Router,
  ) {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user) {
        this.router.navigate('home');
      } else {
        this.router.navigate('login');
      } 
    });
  }
}