使用 ReactJS 访问 Flask 会话

Question

我有一个 Python Flask 服务器，它不仅服务于 web 应用程序，还提供一组路由，有点像 API。

在这个 web 应用程序中，我只使用了 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 应用了解服务器对你的看法。 IE。如果您未登录或正确问候用户，则显示登录页面。只要 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 端点响应），如果数据被修改，不要让服务器做任何错误。