如何在 Angular Firebase 中修复浏览器刷新时的“TypeError：无法读取 null 的属性‘getIdToken’”？

我在 Angular 8 中使用 Firebase 在前端和后端对用户进行身份验证。为了在后端对用户进行身份验证，我需要发送用户 ID 令牌。

我正在使用 firebase getIdToken 来获取令牌，它可以部分工作。刷新页面时出现错误“TypeError: Cannot read property 'getIdToken' of 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);

        })
      );

 }

}

我见过类似的问题我正在使用该解决方案并进行一些修改。

我什至尝试从 getToken() 方法返回承诺，但这也不起作用。

得到currentUser是异步的，因此预计最初它将是null。就像提到的文档:

Note: 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