如何在Angular Fire v7新API中创建Auth Guard？遇类型错误

你遇到的错误核心原因是错误地将RxJS的map操作符当作AuthPipe使用，不符合Angular Fire v7对AuthPipe的类型定义。

修正后的代码 #

import { User } from '@angular/fire/auth';
import { AuthGuard, AuthPipe } from '@angular/fire/auth-guard';

const redirectUnauthorizedAndUnverifiedToAuth: AuthPipe = (user: User | null) => {
  // 未登录 → 重定向到auth
  // 已登录且邮箱验证通过 → 允许访问
  // 已登录但邮箱未验证 → 重定向到auth/verify
  return !!user ? (user.emailVerified ? true : ['auth', 'verify']) : ['auth'];
};

const routes: Routes = [
  {
    path: "auth",
    loadChildren: () => import("./auth/auth.module").then(m => m.AuthModule)
  },
  {
    path: "my-feature",
    loadChildren: () => import("./my-feature/my-feature.module").then(m => m.MyFeatureModule),
    canActivate: [AuthGuard],
    data: { authGuardPipe: redirectUnauthorizedAndUnverifiedToAuth }
  },
  { path: "", redirectTo: "auth", pathMatch: "full" },
  { path: "**", redirectTo: "auth" }
];

原因说明 #

Angular Fire v7的AuthPipe是一个普通函数，要求接收User | null参数，返回值可以是以下类型之一：

• boolean（允许/拒绝访问）
• UrlTree或路由数组（重定向目标）
• Observable<boolean | UrlTree | any[]>（异步场景下使用）

你之前用map操作符，它返回的是一个用于转换Observable流的操作符函数，并非AuthPipe期望的类型，这就导致框架无法识别这个未知的Observable类型，抛出错误。

异步场景示例 #

如果你的权限验证需要异步操作（比如查询Firebase数据库），可以用RxJS的of或其他Observable创建方法包装返回值：

import { of } from 'rxjs';
import { User } from '@angular/fire/auth';
import { AuthGuard, AuthPipe } from '@angular/fire/auth-guard';

const redirectUnauthorizedAndUnverifiedToAuth: AuthPipe = (user: User | null) => {
  // 模拟异步权限检查
  return of(!!user ? (user.emailVerified ? true : ['auth', 'verify']) : ['auth']);
};

内容的提问来源于stack exchange，提问作者Andrew Allen