Как исправить "TypeError: Не удается прочитать свойство 'getIdToken' из null" при обновлении браузера, в угловой базе огня?

Question

Я использую firebase в angular 8 для аутентификации пользователя как во внешнем, так и во внутреннем интерфейсе. Для аутентификации пользователя в бэкэнде мне нужно отправить токен Id пользователя.

Я использую firebase getIdToken для получения токена, и он работает, но частично. Ошибка «TypeError: Невозможно прочитать свойство 'getIdToken' со значением NULL" возникает при обновлении страницы.

Я попытался жестко закодировать токен в метод getToken (), и он работает даже при обновлении, но этоне выполнимо, поэтому я сделал метод getToken для возврата Observable.

Эта наблюдаемая извлекается в Http-перехватчике TokenInterceptorService, чтобы добавить токен ко всем запросам.

export class AuthService {

  constructor(
    public afs: AngularFirestore,   // Inject Firestore service
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router,
    public ngZone: NgZone // NgZone service to remove outside scope warning
  ) {}


  // Other authentication methods for sign up etc.
  // removed here for readability


  getToken(): Observable<string> {

    // getIdToken() returns promise so using 'from' to 
    // convert it to an Observable
    const result = from(this.afAuth.auth.currentUser.getIdToken()
      .then( token => {
          console.log(token);
          return token;
      })
    );

    return result;
  }


}

export class TokenInterceptorService implements HttpInterceptor {


  constructor(private authService: AuthService) { }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return this.authService.getToken()
      .pipe(
        switchMap(token => {

          const newRequest = request.clone({
            setHeaders: {Authorization: `JWT ${token}`}
          });

          return next.handle(newRequest);

        })
      );

 }

}

IЯ видел похожие вопросы , и я использую это решение с некоторыми изменениями.

Я даже пытался вернуть обещание из метода getToken (), но это тоже не работает.

Answer 1

получение currentUser является асинхронным, поэтому можно ожидать, что первоначально это будет null. Как упомянуто в документации :

Примечание: currentUser также может быть нулевым, поскольку объект auth не завершил инициализацию.

ВместоВы должны использовать authState, чтобы получить текущего пользователя. Затем от полученного вами пользователя вы можете позвонить getIdToken(), который возвращает обещание. Вы можете использовать from там, чтобы преобразовать его в наблюдаемое:

getToken(): Observable<string | null> {
  return this.afAuth.authState.pipe(
    take(1),
    switchMap((user) => {
      if (user) {
        return from(user.getIdToken())
      }
      return of(null);
    })
  )
}

Затем в вашем перехватчике также проверьте, существует ли токен. Если пользователя нет, он вернет null