Angular Firebase页面刷新时getIdToken为null的TypeError修复方案

嘿，这个问题我之前也踩过坑！核心原因是页面刷新后，Firebase Auth需要一小段时间初始化并恢复用户会话状态，这时候直接访问this.afAuth.auth.currentUser会拿到null，自然就调用不了getIdToken()了。

咱们换个思路，别盯着同步的currentUser，改用AngularFireAuth提供的user Observable来监听用户状态——它会在用户会话就绪后自动发出用户对象，完美解决刷新时的异步问题。

第一步：修改AuthService的getToken方法 #

把getToken()改成基于user Observable的实现，确保只有当用户状态就绪时才去获取令牌：

import { from, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

export class AuthService {
  constructor(
    public afs: AngularFirestore,
    public afAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone
  ) {}

  // 其他注册/登录方法省略...

  getToken(): Observable<string | null> {
    // 监听用户状态变化，会话恢复后自动拿到用户对象
    return this.afAuth.user.pipe(
      switchMap(user => {
        if (user) {
          // 将getIdToken的Promise转为Observable
          return from(user.getIdToken());
        }
        // 无用户时返回null，也可根据需求返回空字符串
        return from(Promise.resolve(null));
      })
    );
  }
}

第二步：调整TokenInterceptorService逻辑 #

修改拦截器，处理令牌可能为null的场景（比如用户未登录时）：

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 => {
        let modifiedRequest = request;
        // 仅当令牌存在时，添加Authorization请求头
        if (token) {
          modifiedRequest = request.clone({
            setHeaders: { Authorization: `JWT ${token}` }
          });
        }
        // 转发请求（无令牌时直接用原请求发送）
        return next.handle(modifiedRequest);
      })
    );
  }
}

为什么这样能解决问题？ #

this.afAuth.user是一个响应式Observable，页面刷新后，Firebase Auth完成初始化、恢复用户会话的瞬间，它会自动发出当前用户对象。我们通过switchMap把用户对象转换成令牌的Observable，彻底避开了直接访问currentUser导致的null错误。

如果你的业务需要处理未登录场景，还可以在拦截器里加个判断：如果token为null，就跳转到登录页面，这个根据你的需求调整就行～

内容的提问来源于stack exchange，提问作者isAif