使用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 }}" 没有问题,因此没有问题.当然,任何用户都可以通过分别编辑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端点响应),并且如果修改了数据,不要让服务器做错任何事情.