次の画像を使用して質問を説明します。ReactJでリクエストを処理する方法は？
1.クラウド[1]経由でサーバー[3]でホストされている自分のアプリケーションに初めてログインします。 その間、ユーザーはIDプロバイダ[1]を使用して認証します。 IDプロバイダがJWTをクラウドサーバ[1]に送信します。
私の問題は、JWT内のユーザーの詳細を取得するために、ReactJsアプリケーション内でそのJWTを取得する必要があることです。 Reactはクライアント側のフレームワークなので、Reactでリクエストを処理できません。
私の問題はReactJs側からこのJWTを取得する方法です。
はい、ReactJSはフロントエンドなので、自己責任で処理することはできません。
アプリケーションには別のバックエンド（BFF - フロントエンドのバックエンドなど）が必要です。 nodejsサーバーを使用してフロントエンドをラップし、JWT要求を取得してユーザーの詳細を抽出するためのミドルウェアを使用できます。次に、nodejsサーバーからフロントエンドに反応するときに、そのノードに情報をバインドすることができます。
バインディングするときに、データをjavascriptの変数または関数にバインドしたいと考えています。
あなたの反応インデックスページには、グローバルな機能を持たせることができます。
<body>
<script type="application/javascript">
function getUserDetails(){
return JSON.parse("!!!!USER_DATA!!!!");
}
</script>
<div id="app"></div>
</body>
あなたは '!!!! USER_DATA !!!!'を置き換えることができます。反応ページをBFFからレンダリングするときに、有効なjsonとユーザーの詳細を含む部分。このように、
これはさまざまな方法で行うことができますが、別の方法で行うことができます。
なぜjsonで応答しないのですか？ – godsenal
JWTをヘッダとして渡すのではなく、JSONとして送信するのですか？ –