Angular+Firebase AuthGuard问题：currentUserSig延迟导致返回false

当前AuthGuard总是返回false，核心原因是Firebase初始化用户状态需要几毫秒时间，导致同步检查currentUserSig()时，信号还未更新为有效值。以下是针对性的修改方案：

步骤1：完善AuthService，同步Firebase用户状态到Signal #

在AuthService中订阅Firebase原生的user$流，实时更新Signal，确保页面刷新时能捕获到用户的真实认证状态：

// auth.service.ts
import { Injectable, inject, signal, OnInit } from "@angular/core";
import { Observable, from } from "rxjs";
import { Auth, 
    createUserWithEmailAndPassword, 
    signInWithEmailAndPassword, 
    signOut, 
    updateProfile, 
    user 
} from "@angular/fire/auth";
import { UserInterface } from "./user.interface";

@Injectable({
    providedIn: 'root'
})
export class AuthService implements OnInit {
    firebaseAuth = inject(Auth)
    user$ = user(this.firebaseAuth);
    currentUserSig = signal<UserInterface | null | undefined>(undefined)

    ngOnInit(): void {
        // 订阅Firebase用户状态流，自动更新Signal
        this.user$.subscribe((firebaseUser) => {
            if (firebaseUser) {
                this.currentUserSig.set({
                    uid: firebaseUser.uid,
                    email: firebaseUser.email,
                    displayName: firebaseUser.displayName
                    // 补充UserInterface定义的其他字段
                });
            } else {
                this.currentUserSig.set(null);
            }
        });
    }

    register(
        email: string, 
        username: string, 
        password: string
        ) : Observable<void> {
        const promise = createUserWithEmailAndPassword(
            this.firebaseAuth, 
            email, 
            password
            ).then(response => updateProfile(response.user, {displayName: username}))

            return from(promise);
    }

    login(
        email: string,
        password: string
    ) : Observable<void> {
        const promise = signInWithEmailAndPassword(
            this.firebaseAuth,
            email,
            password
        ).then(() => {});

        return from(promise);
    }

    logout(): Observable<void>{
        const promise = signOut(this.firebaseAuth);
        
        return from(promise);
    }
}

步骤2：修改AuthGuard为异步守卫（返回Observable） #

将守卫改为返回Observable<boolean | UrlTree>，等待Firebase完成状态初始化后再判断，彻底解决同步检查的延迟问题：

// auth.guard.ts
import { inject } from "@angular/core"
import { AuthService } from "./auth.service"
import { Router, UrlTree } from "@angular/router";
import { Observable, map, take } from "rxjs";

export const authGuard = (): Observable<boolean | UrlTree> => {
  const authService = inject(AuthService);
  const router = inject(Router);

  // 取最新的用户状态后立即完成订阅，避免内存泄漏
  return authService.user$.pipe(
    take(1),
    map(user => {
      if (user) {
        return true; // 用户已认证，允许访问路由
      }
      return router.createUrlTree(['/login']); // 未认证，跳转登录页
    })
  );
}

方案说明 #

1. 直接依赖Firebase的user$流：该流会在Firebase完成认证状态初始化后主动发出值，无需手动等待延迟。
2. 使用take(1)：确保守卫仅取一次用户状态，完成后自动取消订阅，避免不必要的资源占用。
3. 返回UrlTree：这是Angular官方推荐的导航方式，比直接调用router.navigate()更符合守卫的设计逻辑。

注：canActivate并未被废弃，Angular仍支持函数式的canActivate守卫作为路由权限控制的方案。

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