Angular 5集成AngularFireAuth后路由失效问题咨询

看起来你遇到的核心问题是异步认证状态没有被正确处理，导致路由守卫提前返回了错误的判断结果——这也是控制台日志顺序颠倒的原因：同步代码先执行，异步的认证逻辑还没完成就走了后续流程。

先看你的 AuthService 代码，里面的 isLoggedIn 是同步布尔值，但 AngularFireAuth 的 authState 是异步 Observable，这两个状态很容易不同步。路由守卫如果依赖这个同步变量，就会在认证请求还没完成时就做出“未登录”的判断，进而拦截路由或跳错页面。

第一步：修正 AuthService，用异步 Observable 管理登录状态 #

去掉同步的 isLoggedIn，直接基于 authState 暴露登录状态的 Observable，保证状态实时同步：

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 直接暴露用户状态的 Observable
  user$: Observable<firebase.User | null>;
  // 派生一个登录状态的 Observable，方便守卫直接使用
  isLoggedIn$: Observable<boolean>;

  constructor(private firebaseAuth: AngularFireAuth) {
    this.user$ = firebaseAuth.authState;
    // 将用户状态转换为布尔值：存在用户即为已登录
    this.isLoggedIn$ = this.user$.pipe(
      map(user => !!user)
    );
  }

  login(email: string, password: string): Promise<firebase.auth.UserCredential> {
    return this.firebaseAuth.signInWithEmailAndPassword(email, password);
  }

  // 补充登出方法（可选但建议）
  logout(): Promise<void> {
    return this.firebaseAuth.signOut();
  }
}

第二步：修正路由守卫，异步处理认证状态 #

官方文档的守卫可能是同步示例，你需要改成异步版本，利用 AuthService 的 isLoggedIn$ 等待认证状态返回后再做路由判断：

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authService.isLoggedIn$.pipe(
      take(1), // 只取一次最新值，避免内存泄漏
      map(isLoggedIn => {
        if (isLoggedIn) {
          console.log('Nice it worked');
          return true;
        } else {
          console.log('test');
          // 未登录时跳转到登录页
          return this.router.createUrlTree(['/login']);
        }
      })
    );
  }
}

为什么之前日志顺序颠倒？ #

之前的代码里，isLoggedIn 初始值是 false，守卫同步判断后直接输出 'test'，而登录的异步请求还在处理中；等请求完成后才输出 'Nice it worked'，所以顺序反过来了。改成异步守卫后，会等待 authState 返回结果，再决定输出哪个日志，顺序就正常了。

最后检查路由配置 #

确保你的路由配置正确使用了这个守卫，示例如下：

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

这样修改后，路由应该能正确根据用户的认证状态进行拦截或放行，日志顺序也会恢复正常。

内容的提问来源于stack exchange，提问作者Burst of Ice