0

インターセプターを使用して、Angular アプリケーションでアクセス トークン処理を実装しようとしています。

Spring バックエンドでは、いくつかのルートをパブリックに設定し (例: localhost:8080/api/public/hello)、いくつかのルートはアクセス トークンでのみアクセスできるように設定しました (例: localhost:8080/api/hello)。また、 WebMvcConfigurer をオーバーライドして CORS サポートを無効にしました。

コンポーネントがパブリックAPIを呼び出している場合、インターセプターは正常に動作し、Authorization ヘッダーが追加されますが、明らかにページを読み込む必要はありませんが、適切に設定されており、問題なく動作しているようです。

ただし、非パブリックAPI を呼び出そうとすると、インターセプターが機能しません。2 つの要求が呼び出され、最初の要求には Authorization ヘッダーが含まれていますが機能していません。もう 1 つの要求にはヘッダーがありません。到達していません。詳細は以下の写真に示されています。

私のインターセプター コードは、リクエスト パラメーターを複製してヘッダーを設定するだけで、API 呼び出しはコンポーネント内の非常に単純な行です。関連するインポートが追加され、モジュール、プロバイダーが正しいはずです (パブリック API が機能するため、インターセプター自体は問題ないはずです)。

インターセプター (token-interceptor.service.ts):

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  const authReq = req.clone({
    setHeaders: {
      Authorization: this.getAccessToken()
    }
  });
  return next.handle(authReq);
}

コンポーネント (home.component.ts): (.helloPublic と .hello はメソッド名です)

ngOnInit(): void {
  this.helloApi.helloPublic().subscribe((response: HelloDto) => {
    this.hello = response;
  });
}
4

1 に答える 1