我有一个 Python Flask 服务器，它不仅为 web 应用程序提供服务，还提供一组路由，有点像 API。
在这个 web 应用程序中，我只使用 ReactJS，因为在 HTML 代码中只是一个 div，而 ReactJS 将所有内容从那里放置到位。
唯一的问题是：Flask 负责登录过程，这意味着只有 Flask 可以访问用户的凭据和登录结果。为了让 ReactJS 界面正常工作，它需要用户的 ID（很可能是一个巨大的字符串）和其他附加信息。我可以轻松地将这些信息存储在 Flask 的会话中，但是 ReactJS 如何读取它呢？
有什么建议？
我的建议是使用 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 }}”没有问题，因此也没有这些问题。当然，任何用户都可以改变这一点——分别通过编辑 HTML 或 JS——但这将是一个纯粹的装饰性的、仅限客户端的 hack。
另一种方法是实现一些 API 端点，例如/api/whoami并在 React 应用程序初始化时查询这些端点。好处是，您不需要任何模板（您的 HTML 可以是完全静态的），坏处是，您需要发送额外的 HTTP 请求并等待响应，然后才能向最终用户显示最终页面。从安全的角度来看，它本质上与上面的 JS-in-HTML 方法相同，只是传输方式不同。
实际上，通常是两种方法混合使用。嵌入是为了避免在第一页加载时进行额外的往返，API 是在您的应用程序认为状态应该发生变化后（例如，在用户按下“注销”按钮后）获取更新。
当您向服务器发送请求（表单提交、XHR/AJAX API 请求或任何其他需要考虑用户的内容）时，永远不要相信客户端输入，甚至不要向您认为自己的服务器发送 - 但请检查会议说什么。这意味着您必须确保传递 cookie，例如，fetch您需要fetch(url, {credentials: "same-origin"})请求具有 cookie。
基本上，将 React 必须知道的数据作为 JSON 文档（通过模板嵌入或 API 端点响应）传递，并且如果该数据被修改，不要让服务器做任何错误。