Куда поместить вызов FirebaseAuth.onAuthStateChanged в приложении Angular?

Question

Какое подходящее место для добавления вызова для инициализации глобального прослушивателя в приложении Angular?

Вот код:

export class AuthService {
  constructor(
    private store: Store<fromAuth.State>,
    private afAuth: AngularFireAuth
  ) {
    this.afAuth.auth.onAuthStateChanged(payload => {
      if (payload) {
        const user: UserBeta = {
          uid: payload.uid,
          displayName: payload.displayName,
          email: payload.email,
          emailVerified: payload.emailVerified
        };

        this.store.dispatch(AuthActions.authenticated({ user }));
      } else {
        this.store.dispatch(AuthActions.notAuthenticated());
      }
    });
  }

Как вы могли видеть, я добавил егоконструктору AuthService, но мне это не кажется правильным.

Меня также беспокоит то, что следующий код имеет две зависимости: Ngrx и AngularFireAuth.

В этом случае было бы правильным перейти куда-нибудь к FirebaseModule (т.е. firebase.module.ts) и, если да, как будет выглядеть вызов?

Answer 1

Вы можете добавить его внутри ngOnInit() из документов:

Метод обратного вызова, который вызывается сразу после того, как детектор изменений по умолчанию впервые проверил свойства привязки данных к директиве,и до того, как какой-либо вид или содержание дочерних элементов были проверены. Он вызывается только один раз, когда создается директива.

Проверьте здесь для получения дополнительной информации:

https://angular.io/api/core/OnInit

Answer 2

Спасибо всем за ответы.

Я наконец-то решил ввести новый метод initialize() внутри AuthService и вызвать его внутри ngOnInit() метода AppComponent.

auth.service.ts :

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(
    private http: HttpClient,
    private store: Store<fromAuth.State>,
    private afAuth: AngularFireAuth
  ) { }

  initialize() {
    this.afAuth.auth.onAuthStateChanged(payload => {
      if (payload) {
        const user: UserBeta = {
          uid: payload.uid,
          displayName: payload.displayName,
          email: payload.email,
          emailVerified: payload.emailVerified
        };

        this.store.dispatch(AuthActions.authenticated({ user }));
      } else {
        this.store.dispatch(AuthActions.notAuthenticated());
      }
    });
  }
}

app.component.ts :

export class AppComponent implements OnInit {
  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    this.authService.initialize();
  }
}

Обновление : В моем проекте я использую ngrx для управления состоянием. Так как AngularFireAuth также управляет пользовательской информацией, я столкнулся с трудностями в управлении одним и тем же состоянием в нескольких местах, что увеличило сложность, поэтому окончательное решение стало довольно сложным. В конце концов, я решил прекратить использование прослушивателя onAuthStateChanged и начать локальное сохранение состояния ngrx.