如何修复AngularFire路由守卫：将未授权用户重定向至着陆页

一、先解决编译错误 #

你尝试的canActivate(() => ...)写法不符合Angular路由规则，canActivate属性需要接收守卫函数/类的数组，而非直接调用函数。修正为AngularFire推荐的写法：

{ 
  path: 'home', 
  component: HomeComponent, 
  canActivate: [canActivate(() => redirectUnauthorizedTo(['landing']))] 
}

二、修复重定向到空白页的问题 #

1. 改用推荐的守卫配置方式 #

放弃原有的AuthGuard类+data.authGuardPipe写法，使用上述canActivate辅助函数写法（AngularFire v7+官方推荐），避免配置冲突导致重定向失效。

2. 统一Firebase Auth初始化逻辑 #

不要在多个模块重复导入provideAuth，仅在根模块app.module.ts中完成初始化：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { AuthGuardModule } from '@angular/fire/auth-guard';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LandingComponent } from './landing/landing.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    LandingComponent,
    HomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    AuthGuardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 排查着陆页路由可用性 #

直接访问/landing路径，确认LandingComponent能正常渲染，排除组件自身问题导致的“空白页”假象。

4. 处理Auth状态加载延迟 #

若应用启动时Auth状态未完成加载，守卫可能误判用户未授权导致重定向异常，可添加等待Auth初始化的逻辑：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { canActivate, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
import { firstValueFrom } from 'rxjs';
import { getAuth, onAuthStateChanged } from '@angular/fire/auth';

// 自定义等待Auth初始化的逻辑
const waitForAuth = async () => {
  const auth = getAuth();
  await firstValueFrom(new Promise(resolve => onAuthStateChanged(auth, resolve)));
  return redirectUnauthorizedTo(['landing'])();
};

// components
import { LandingComponent } from './landing/landing.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: 'landing', component: LandingComponent },
  { path: 'default', component: LandingComponent },
  { 
    path: 'home', 
    component: HomeComponent, 
    canActivate: [canActivate(() => waitForAuth())] 
  },
  { path: '', component: LandingComponent },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

5. 确认路由顺序 #

确保home路由在通配符路由（**）之前，避免路由匹配优先级错误。你的现有路由顺序是正确的，无需调整。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe