使用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端点响应），并且如果修改了数据，不要让服务器做错任何事情。