AngularFire中hasCustomClaim与customClaims功能失效问题求助

问题根源 #

1. hasCustomClaim的判断逻辑是检查指定声明的key是否存在，而非判断key对应的值是否为真。你设置{"manager": false}时，manager这个key仍然存在，因此hasCustomClaim("manager")始终返回true。
2. 基于role的校验逻辑未生效，通常是因为客户端缓存了旧的ID Token，自定义声明更新后，原有Token不会自动同步，需要手动强制刷新。

解决方案 #

1. 修正布尔类型自定义声明的校验逻辑 #

不要直接使用hasCustomClaim做权限判断，手动取出声明的值做布尔校验：

// 正确的manager权限校验，只有manager值为true时才通过
const managerOnly = pipe(
  customClaims,
  map(claims => !!claims?.manager)
);
// admin、editor权限同理修改
const adminOnly = pipe(
  customClaims,
  map(claims => !!claims?.admin)
);

2. 修正role类型自定义声明的校验逻辑 #

添加可选链避免空值报错，使用严格等于做判断，同时确保每次校验时取的是最新的Token声明：

const editorOnly2d = pipe(
  customClaims,
  map(claims => claims?.role === "editor")
);
const mngOnly2 = pipe(
  customClaims,
  map(claims => claims?.role === "manager")
);

3. 路由守卫强制获取最新声明 #

如果是做路由控制，建议每次进入路由时直接调用getIdTokenResult(true)强制拉取最新的声明，避免全局缓存的旧声明导致校验错误，示例如下（以Angular路由守卫为例）：

import { CanActivateFn, Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { map, take, switchMap, of, tap } from 'rxjs';

export const managerGuard: CanActivateFn = (route, state) => {
  const auth = inject(AngularFireAuth);
  const router = inject(Router);
  
  return auth.authState.pipe(
    take(1),
    // 强制刷新Token，获取最新声明
    switchMap(user => user ? user.getIdTokenResult(true) : of(null)),
    // 直接从返回结果中判断role值
    map(res => res?.claims?.role === 'manager'),
    tap(isPass => {
      if (!isPass) router.navigate(['/unauthorized']);
    })
  );
};

4. Emulator环境额外注意 #

Firebase Emulator的Auth模块存在本地缓存，修改自定义声明后如果校验仍不生效，可尝试重启Emulator、清除浏览器本地存储后重新登录测试。

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