Angular 17 Guard结合Firebase Auth始终重定向至登录页问题排查

1. 确保AuthService是全局单例 #

首先检查你的AuthService装饰器，必须设置providedIn: 'root'，确保整个应用共享同一个服务实例，避免状态隔离：

@Injectable({
  providedIn: 'root' // 核心配置，保证单例
})
export class AuthService {
  constructor(private auth: Auth) {}

  isLoggedIn(): boolean {
    return this.auth.currentUser !== null;
  }
}

如果之前在模块/组件的providers数组中声明过AuthService，请移除该配置，防止创建多个实例。

2. 处理Firebase认证的异步特性 #

Firebase的currentUser是同步值，但页面刷新后，Firebase需要异步恢复用户会话，此时守卫执行时可能还未拿到有效用户，导致isLoggedIn()返回false。需要改为异步监听认证状态：

修改AuthService，添加异步状态监听 #

import { Injectable } from '@angular/core';
import { Auth, authState, User } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 监听Firebase认证状态变化的Observable
  private user$: Observable<User | null>;

  constructor(private auth: Auth) {
    this.user$ = authState(this.auth);
  }

  // 同步方法（保留给组件使用）
  isLoggedIn(): boolean {
    return this.auth.currentUser !== null;
  }

  // 异步方法（供守卫使用）
  get isLoggedIn$(): Observable<boolean> {
    return this.user$.pipe(map(user => !!user));
  }
}

更新路由守卫为异步逻辑 #

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { tap } from 'rxjs/operators';

export const AuthGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  return authService.isLoggedIn$.pipe(
    tap(isLoggedIn => {
      if (!isLoggedIn) {
        router.navigate(['login']);
      }
    })
  );
};

问题根源说明 #

• 多实例问题：如果AuthService未配置providedIn: 'root'，守卫和AppComponent可能注入不同的服务实例，导致状态不一致。
• 异步初始化：页面刷新后，Firebase需要时间从本地存储加载用户会话，同步调用isLoggedIn()会因时机过早返回false，改用authState监听能确保获取最新的认证状态。

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