ReactJSとのFlaskセッションへのアクセス

Question

私はPython Flaskサーバーをウェブアプリケーションだけでなく、APIのような一連のルートにも対応しています。

このWebアプリケーションでは、HTMLコードは単にdivなので、ReactJSはそこからすべての情報を配置しているため、ReactJSのみを使用しています。

Flaskはログインプロセスを担当しています。つまり、Flaskだけがユーザーの資格情報とログイン結果にアクセスできます。 ReactJSインターフェースが正しく動作するためには、ユーザーのID（他にも巨大な文字列）とその他の追加情報が必要です。私はFlaskのセッションに関する情報を簡単に隠すことができましたが、ReactJSはどのようにそれを読むことができますか？

提案がありますか？

Answer 1

私の提案は、Jinja2テンプレートを使用してデータを渡すことです。それは何でもかまいません（例えば、<meta>タグ、または隠された<div>）。しかし、私は<script>タグに初期データを示唆しています。例えば。

... 
    <script type="text/javascript"> 
     window.initialData = {{ initial_data|tojson }}; 
    </script> 
    <script type="text/javascript" src="assets/your-react-app/main.js"></script> 
</body> 
</html> 

initial_dataは、すべてのリアクトアプリが含まれているが、例えば、知っておく必要があり

の精神で何かユーザー名、プロフィール画像のURL、新しい通知フラグなど

このデータは、どのようなサーバーがあなたのことを知っているかを知るためのReactアプリ向けです。私。ログインしていない場合はログインページを表示したり、正しく挨拶したりします。 JSとHTML（テンプレート）コードの両方があなたのコントロール下にある限り、これは静的ページをこの情報でレンダリングするのと同じくらい安全です。レンダリングに問題がないので、「You're logged in as {{ current_user.username }}」もありません。もちろん、どのユーザーもHTMLやJSを編集することでこれを変更できますが、これは純粋に美容的な、クライアント側のみのハックです。代わりに、いくつかのAPIエンドポイントを実装することもできます。 /api/whoamiを検索し、Reactアプリの初期化に関する質問をします。 （HTMLは完全に静的にすることができる）テンプレートが必要ないという欠点があります。欠点は、エンドユーザーに最終ページを表示する前に余分なHTTPリクエストを送信し、応答を待つ必要があることです。セキュリティ上の観点からは、上記のJS-in-HTMLメソッドと基本的に同じですが、トランスポートが異なる点です。

実際、通常は両方の方法が混在しています。埋め込みとは、最初のページの読み込みで余分な往復を避けることです。アプリは、状態が変更されたとアプリが判断した後に更新を取得します（ユーザーが「ログアウト」ボタンを押した後など）。

あなたのサーバー（フォーム送信、XHR/AJAX APIリクエスト、またはユーザーを考慮に入れたもの）にリクエストを送信しているときは、クライアントの入力を信頼せず、あなたが思っているサーバーにも送信しませんセッションが何を言っているかを確認してください。これは、あなたが周囲にクッキーを渡すことを確認しなければならないことを意味します。 fetchであれば、クッキーを要求するにはfetch(url, {credentials: "same-origin"})が必要です。

Reactが知っている必要があるデータを、JSONドキュメントとして（テンプレートの埋め込みやAPIエンドポイントの応答を介して）渡し、そのデータが変更された場合にサーバーが何か問題を起こさないようにします。