Условная логика Angularfire в шаблоне с наблюдаемой задержкой authState при отображении шаблона - PullRequest
Новая
       12

Условная логика Angularfire в шаблоне с наблюдаемой задержкой authState при отображении шаблона

0 голосов
/ 14 апреля 2019

Привет, я создаю угловое приложение с @ angular / fire.В сервисе auth у меня есть наблюдаемый пользователь, который получает значение текущего пользователя, если пользователь аутентифицирован, и значение NULL, если пользователь не аутентифицирован. 

export class AuthService {
 user$: Observable<User>;

  constructor(private afAuth: AngularFireAuth, private afs: 
 AngularFirestore) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      })
    )
  }

Это в конструкторе сервисатак что все компоненты, которые внедряют службу, могут видеть пользователя $ variable.Now, скажем, у меня есть навигация, которая показывает различные кнопки в зависимости от того, аутентифицирован ли пользователь или нет. 

<ul>

  <!-- user IS NOT logged in -->
  <li *ngIf="!(authService.user$ | async)">
    This is visible if user is NOT logged in
  </li>

  <!-- user IS logged in -->
  <li *ngIf="authService.user$ | async" fxHide.xs>
    This is visible if user IS logged in
  </li>
</ul>

Пользователь $ observable пуств начале и требуется некоторое время , чтобы принять значение, что означает, что даже если пользователь вошел в систему, в шаблоне «Это видно, если пользователь НЕ вошел в систему» ​​будет отображаться за пару секунд доobservable принимает значение текущего пользователя и затем переключается на другой тег li.Есть ли лучший способ проверить аутентифицированного пользователя, чтобы предотвратить это?Обратите внимание, я не могу использовать защиту маршрута, потому что я не хочу блокировать целую страницу, а только некоторую условную логику между кнопками и некоторыми другими элементами.Это дублирующий вопрос к этому: Angular 6 AngularFireAuth проверяет, вошел ли пользователь в систему до отображения страницы , где я не нашел ответа.Заранее спасибо

1 Ответ

1 голос
/ 14 апреля 2019

В сервис аутентификации добавьте тему, на которую компоненты могут подписаться, и дождитесь ответа 

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable()
export class AuthService {

  userAccessSubject = new Subject();

  user$: Observable<User>;

  constructor(private afAuth: AngularFireAuth, private afs:
    AngularFirestore) {
    this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          this.userAccessSubject.next(this.afs.doc<User>(`users/${user.uid}`).valueChanges());
        } else {
          this.userAccessSubject.next(null);
        }
      })
    )
  }

  getUserAccess() {
    return this.userAccessSubject.asObservable();
  }
}

А в компоненте получить userAccess из блока подписки 

constructor() {
  // Here add code to enable loader
  this.authService.getUserAccess()
    .subscribe(userAccessResponse => {
      this.userAccess = userAccessResponse;
      // Hide loader
    })
}
...