使用ReactJS訪問Flask會話

Question

我有一個Python Flask服務器，不僅提供webapp，還提供一組路由，有點像API。

在這個webapp中，我只使用ReactJS，因為HTML代碼只是一個div而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包含您需要知道的所有React應用程序，例如用戶名，個人資料圖片URL，新通知標志等。

此數據僅供React應用程序知道服務器對您的看法。 即如果您未登錄或正確地問候用戶，則顯示登錄頁面。 只要JS和HTML（模板）代碼都在您的控制之下，這就像使用此信息呈現靜態頁面一樣安全。 由於渲染“ You're logged in as {{ current_user.username }} ” You're logged in as {{ current_user.username }}沒有問題，因此不存在問題。 當然，任何用戶都可以通過分別編輯HTML或JS來改變這一點 - 但這只是一個純粹的裝飾性的，僅限客戶端的黑客攻擊。

另一種方法是實現一些API端點，例如/api/whoami並在React app初始化上查詢這些端點。 好處是，您不需要任何模板（您的HTML可以完全靜態），缺點是，您需要發送額外的HTTP請求並等待響應，然后才能向最終用戶顯示最終頁面。 從安全角度來看，它與上面的JS-in-HTML方法基本相同，只是傳輸不同。

實際上，通常這兩種方法都是混合的。 嵌入是為了避免在第一頁加載時額外的往返，並且API是在您的應用認為狀態應該已經改變之后獲得更新（例如在用戶按下“注銷”按鈕之后）。

當您向服務器發送請求時（表單提交，XHR / AJAX API請求或其他任何將用戶考慮在內的請求），永遠不要相信客戶端輸入，甚至不要發送給您認為自己的服務器 - 但請檢查會議上說的是什么。 這意味着你必須確保傳遞cookie，例如使用fetch你需要fetch(url, {credentials: "same-origin"})來獲取cookie。

基本上，傳遞數據React必須知道為JSON文檔（通過模板嵌入或API端點響應），並且如果修改了數據，不要讓服務器做錯任何事情。