Angular路由守卫调用Observable的pipe报错：Cannot read properties of undefined

你遇到的Cannot read properties of undefined (reading 'pipe')错误，核心是AuthService里的fireBaseUser$Observable没有提前初始化，且依赖异步回调赋值，导致守卫调用时这个变量仍为undefined。

具体问题：

• fireBaseUser$仅在afAuth.onAuthStateChanged的异步回调中赋值，但守卫的canActivate方法会在服务初始化后立即执行，此时回调尚未触发，fireBaseUser$处于未定义状态。
• 直接创建普通Observable的方式不合适，它仅在订阅时触发一次，无法同步用户状态的后续变化。

改用BehaviorSubject（已导入）来管理用户状态，它能保存当前状态并提供初始值，确保任何时候订阅都能拿到有效数据：

修正后的AuthService代码 #

import { FirebaseApp } from '@angular/fire/app';
import { BehaviorSubject, Observable, take } from 'rxjs';
import { Auth, getAuth, GoogleAuthProvider, User } from "firebase/auth";

// 定义UserInfo类型，避免类型报错
type UserInfo = User | null;

export class AuthService {
  afAuth: Auth;
  // 用BehaviorSubject初始化，初始值为null
  private fireBaseUserSubject$ = new BehaviorSubject<UserInfo>(null);
  // 对外暴露只读Observable，防止外部直接修改状态
  fireBaseUser$: Observable<UserInfo> = this.fireBaseUserSubject$.asObservable();

  constructor(private afApp: FirebaseApp, private route: ActivatedRoute) {
    this.afAuth = getAuth(this.afApp);
    // 监听auth状态变化，更新BehaviorSubject的值
    this.afAuth.onAuthStateChanged((user) => {
      this.fireBaseUserSubject$.next(user);
    });
  }
}

修正后的AuthGuard代码 #

import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';
import { map, take } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';

// 必须添加@Injectable，否则Angular无法注入服务
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // 加take(1)确保订阅只取一次值后完成，避免内存泄漏
    return this.auth.fireBaseUser$.pipe(
      take(1),
      map((user) => {
        if (user) {
          return true;
        } else {
          // 携带当前路由地址，登录后可跳转回原页面
          this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
          return false;
        }
      })
    );
  }
}

• 确保AuthService和AuthGuard都正确注册到Angular依赖注入系统（比如添加@Injectable({ providedIn: 'root' })）。
• 导入User类型，避免UserInfo的类型报错。
• 守卫中添加take(1)，防止订阅长期活跃导致内存泄漏。

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