Angular 15：函数式路由守卫中ActivatedRoute参数为空的问题

问题场景 #

我尝试使用以下函数式路由守卫做权限校验：

export function AuthGuard() {
  const route = inject(ActivatedRoute);
  const authService = inject(AuthService);

  return authService.state$.subscribe((user) => {
    return user.uuid === route.snapshot.params.uuid;
  });
}

遇到两个核心问题：

• 函数式守卫中，route.snapshot.params始终为空，尝试订阅路由事件或ParamsMap也无法获取到参数数据
• 切换回基于类的CanActivate守卫时，ActivatedRouteSnapshot中的路由参数能正常读取，但authService的流只收到首次发射的undefined值

试过在目标组件中用combineLatest([route, authService])配合重定向做临时处理，但问题依然存在。

解决方案 #

• 将authService中使用的BehaviorSubject替换为ReplaySubject，解决了类守卫中仅收到初始undefined值的问题
• 添加路由Resolver，确保守卫执行前路由参数已准备就绪，解决了函数式守卫中route.snapshot.params为空的问题

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