javascript - 如何在 Angular Firebase 中修复浏览器刷新时出现 "TypeError: Cannot read property ' getIdToken' of null"？

Question

我在 Angular 8 中使用 firebase 来验证前端和后端的用户。要在后端验证用户身份，我需要发送用户 ID token 。

我正在使用 firebase getIdToken 来获取 token ，它可以工作但部分工作。刷新页面时出现错误“TypeError:无法读取 null 的属性 'getIdToken'”。

我试图将 token 硬编码到 getToken() 方法，它甚至在刷新时也能工作，但这是不可行的，所以我让 getToken 方法返回 Observable。

该 observable 在 Http 拦截器 TokenInterceptorService 中获取，以将 token 添加到所有请求中。

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);

        })
      );

 }

}

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

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

Answer 1

获取 currentUser是异步的，因此预计最初它将是 null .如 documentation 中所述:

Note: currentUser might also be null because the auth object has not finished initializing.

相反，您应该使用 authState获取当前用户。然后从您从那里获得的用户那里，您可以调用 getIdToken() ，它返回一个 promise 。您可以使用 from在那里将其转换为可观察的:

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

然后在您的拦截器中，还要检查 token 是否存在。如果没有用户，则返回 null