Angular Resource 不适用于路由守卫

𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗔𝗿𝗲 𝗡𝗼𝘁 𝗔 𝗚𝗼𝗼𝗱 𝗙𝗶𝘁 𝗙𝗼𝗿 𝗚𝘂𝗮𝗿𝗱𝘀

Angular 22 引入了稳定的 Resource API。这个工具可以帮助你查询 API 并跟踪加载或错误状态。它在许多任务中表现出色。

然而，不要在 Guards 或 Resolvers 中使用它。

Guards 和 Resolvers 会阻塞导航。Guard 用于检查用户是否可以访问某个路由。Resolver 则在组件加载前获取数据。两者都需要返回一个 boolean、Promise 或 Observable 来完成其逻辑。

Resources 属于 Signals API。Signals 是响应式的。它们不会同步返回结果。当你创建一个 Resource 时，其值初始为 undefined，随后进入 loading 状态。

请看这个错误示例：

export const authGuard: CanActivateFn = () => {
  const authResource = httpResource<boolean>(() => ({
    url: '/api/auth/status',
  }));

  return authResource.value() ?? false;
};

.value() 方法会立即返回当前的 signal 值。由于 API 调用需要时间，初始值是 undefined。Guard 看到 undefined 后将其视为 false，从而取消了导航。应用程序永远不会等待 API。

为了修复这个问题，你必须将 Resource 转换为 Observable。这增加了不必要的复杂性。

Guards 需要表示单个异步事件。为此，请使用带有 Observables 的 HttpClient，或者使用带有 Promises 的原生 fetch API。

正确的方法：

export const authGuard: CanActivateFn = () => {
  const http = inject(HttpClient);

  return http.get<boolean>('/api/auth/status');
};

Observable 会告知 Router 等待请求完成。

请在组件和服务中使用 Resource API。它非常适合将异步数据绑定到模板中。请将 Promises 和 Observables 留给你的 Router 逻辑。

Source: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j