使用ReactJ访问Flask会话

Question

我有一个Python Flask服务器，它不仅提供一个webapp，还提供一组路由，有点像API。在

我把所有的东西都放在了webjs中。在

唯一的问题是：Flask负责登录过程，这意味着只有Flask可以访问用户的凭据和登录的结果。为了使ReactJS接口正常工作，它需要用户的ID（很可能是一个巨大的字符串）和其他附加信息。我可以很容易地将这些信息保存在Flask的会话中，但是ReactJS如何读取它呢？在

有什么建议吗？在

Answer 1

我的建议是使用Jinja2模板传递数据。它可以是任何东西（例如<meta>标记，甚至是隐藏的<div>），但我建议使用带有初始数据的<script>标记。E、 精神上的东西

    ...
    <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应用程序，以了解服务器对您的看法。一、 e.如果没有登录，则显示登录页面，或者正确地问候用户。只要JS和HTML（template）代码都在您的控制之下，这就像呈现一个包含此信息的静态页面一样安全。由于呈现“You're logged in as {{ current_user.username }}”没有问题，因此也没有问题。当然，任何用户都可以通过分别编辑HTML或JS来改变这一点，但这将是一种纯粹的、仅限于客户端的黑客行为。在

另一种方法是实现一些API端点，例如/api/whoami，并在React app初始化时查询这些端点。好处是，您不需要任何模板（您的HTML可以是完全静态的），缺点是，您需要发送额外的HTTP请求并等待响应，然后才能向最终用户显示最终页面。从安全角度来看，它本质上与上面的JS-in-HTML方法相同，只是传输方式不同。在

实际上，通常这两种方法是混合的。嵌入是为了避免第一次页面加载时的额外往返，API是为了在应用程序认为状态应该发生变化后（例如，在用户按下“注销”按钮之后）获得更新。在

当您向服务器发送请求（表单提交、XHR/ajaxapi请求或任何其他考虑到用户的内容）时，永远不要信任客户端输入，甚至不要发送给您认为自己是谁的服务器，但要检查会话内容。这意味着您必须确保传递cookies，例如使用fetch时，您需要fetch(url, {credentials: "same-origin"})来请求具有cookies。在

基本上，pass data React必须知道是JSON文档（通过模板嵌入或API端点响应），如果数据被修改，不要让服务器做任何错误的事情。在