AngularのResourceはガードには適していません

Angular ResourceはGuardには適していません

Angular 22では、安定版のResource APIが導入されました。このツールはAPIのクエリを助け、ロード中やエラーの状態を追跡します。多くのタスクにおいてうまく機能します。

しかし、GuardやResolverでは使用しないでください。

GuardとResolverはナビゲーションをブロックします。Guardはユーザーがルートにアクセスできるかどうかをチェックします。Resolverはコンポーネントがロードされる前にデータを取得します。どちらも、ロジックを完了させるためにboolean、Promise、またはObservableを必要とします。

Resourceは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に変換する必要があります。しかし、これは不必要な複雑さを加えることになります。

Guardは単一の非同期イベントを表す必要があります。そのためには、Observablesを使用したHttpClient、またはPromisesを使用したネイティブのfetch APIを使用してください。

正しい方法：

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

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

Observableは、リクエストが完了するまでRouterに待機するように伝えます。

Resource APIはコンポーネントやサービスで使用してください。非同期データをテンプレートにバインドするのに最適です。PromiseやObservableはRouterのロジック用に取っておきましょう。

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