angular - initialNavigation が有効で CanActivateChild が false を返す Angular Universal が応答しない

Question

すべてのルートが保護され、RouterinitialNavigationプロパティが に設定されている SSR を使用する Angular アプリケーションがありenabledます。コード フロー + PKCE でangular-oauth2-oidcパッケージを使用しています。すべてのルートは遅延ロードされCanActivateChild、ユーザーが認証されているかどうかをチェックするガードがあります。

ブラウザーでは、認証されているかどうかがCanActivateChildチェックされ、認証されていない場合は Azure AD B2C にリダイレクトされて認証が実行されます。これは、SSR なしで実行している場合は正常に機能しています。

サーバーにいるとき、CanActivateChild認証されていない場合は、戻ることでナビゲーションをキャンセルするだけfalseですが、リダイレクトはありません。アイデアは、認証されておらず、ブラウザーに認証を処理させるため、アクティブ化されたルートなしで、レンダリング/ブートストラップされたルート コンポーネントだけを返すことです。angular-oauth2-oidcはブラウザー プラットフォーム用であるため、それはブラウザーに任せOAuthServiceます。一部のブラウザー API に依存するため、一部の機能はサーバー上では機能しません。OAuthStorage各プラットフォームの実装があるので、取得できます各プラットフォームのトークン。このセットアップでは、Express.js サーバーは応答しません。これは、アプリケーションのブートストラップがナビゲーションの完了を待っているためだと思われますinitialNavigation。enabled. ある意味でのキャンセルはナビゲーションの完了でもあるので、これでうまくいくと期待していました。

これを回避するには、ページがちらつくため無効initialNavigationにするのは良くありません (つまり、いいえ)、ナビゲーションを完了するためだけに空のコンポーネントにリダイレクトする、手動でサーバーから Azure AD B2C 承認エンドポイントなどへ。

誰かがこれに遭遇し、より良い解決策を持っていますか? 何か不足していますか、それとも設定が間違っていますか?

いくつかのスニペットを追加して編集します。

認証ガード:

canActivateChild(
    _: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authService.isAuthenticated$.pipe(
      tap((isAuthenticated) => isAuthenticated || this.authService.login(state.url)),
    );
  }

は、トークンが Cookie にある場合にのみサーバーで送信されるauthService.isAuthenticated$fromObservableです。トークンが保存されていない場合BehaviorSubjectなど、サーバーで正常に返されることを確認しました。true の場合、ナビゲーションが完了するため、すべてが正常に機能します。falsetrue

authService.loginブラウザのメソッドがメソッドを呼び出しますOAuthService.initCodeFlow。サーバーでは空のメソッドです。