使用ReactJS访问Flask会话 [英] Access Flask session with ReactJS

问题描述

我有一个Python Flask服务器，它不仅提供Web应用程序，还提供一组路由，类似于API.

I have a Python Flask server serving not only an webapp but also a set of routes, sort of like an API.

在此Web应用程序中，我仅使用ReactJS，因为HTML代码中只是一个div，ReactJS从那里将所有内容放置在适当的位置.

In this webapp, I'm using only ReactJS, as in the HTML code is simply a div and ReactJS puts everything in place from there.

唯一的问题是:Flask正在处理登录过程，这意味着只有Flask有权访问用户的凭据和登录结果.为了使ReactJS界面正常工作，它需要用户的ID(很可能是一个很大的字符串)和其他附加信息.我可以轻松地将这些信息保存在Flask的会话中，但是ReactJS如何读取它?

Only problem is: Flask is taking care of the login process, which means only Flask has access to the credentials of the user and the result of the login. For the ReactJS interface to work properly, it needs an ID (most likely a huge string) of the user and other additional info. I could easily stash that info on Flask's session, but how can ReactJS read it?

有什么建议吗?

推荐答案

我的建议是使用Jinja2模板传递数据.可能是任何东西(例如< meta> 标记，甚至是隐藏的< div> )，但我建议使用< script> 带有初始数据的标签.例如.有精神的

My suggestion is to pass data using Jinja2 templates. It could be anything (e.g. <meta> tags or even a hidden <div>), but I would suggest a <script> tag with initial data. E.g. something in spirit of

    ...
    <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应用需要了解的所有信息，例如用户名，个人资料图片网址，新的通知标记等.

Where initial_data contains all your React app need to know, e.g. username, profile picture URL, new notifications flag, etc.

此数据仅用于React应用程序了解服务器对您的看法.IE.如果您尚未登录，则显示登录页面，或正确向用户打招呼.只要JS和HTML(模板)代码都在您的控制之下，这与呈现带有此信息的静态页面一样安全.由于呈现"您以{{current_user.username}} 登录"没有问题，因此两者都不存在.当然，任何用户都可以通过分别编辑HTML或JS来更改此设置，但这只是纯粹的装饰性，仅限客户端的黑客行为.

This data is only for React app to know what server thinks of you. I.e. showing a login page if you aren't logged in, or greeting the user correctly. As long as both JS and HTML (template) code is under your control, this is as secure as rendering a static page with this information. As there are no issues with rendering "You're logged in as {{ current_user.username }}", neither there are with those. Of course, any user can change this - by editing HTML or JS respectively - but this is would be a purely cosmetic, client-side-only hack.

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

An alternative would be to implement some API endpoints, e.g. /api/whoami and query those on React app initialization. The upside is, you don't need any templating (your HTML can be completely static), the downside is, you need to send an extra HTTP request and wait for response before you can show end-user the final page. From the security viewpoint, it's essentially the same as the JS-in-HTML method above, just that the transport differs.

实际上，通常两种方法混合使用.嵌入是为了避免在首页加载时产生额外的往返路程，而API则是在您的应用程序认为状态应已更改后(例如，在用户按下注销"按钮后)，以获取更新.

Actually, normally it's both approaches mixed. Embedding is to avoid extra round-trip on the first page load, and API is to get updates after your app believes the state should've changed (e.g. after user presses the "logout" button).

在向服务器发送请求(表单提交，XHR/AJAX API请求或其他将用户考虑在内的其他请求)时，请不要信任客户端输入，甚至不要发送给您认为自己是谁的服务器-但请查看会议内容.这意味着您必须确保将cookie传递给周围，例如使用 fetch 时，您需要 fetch(url，{凭据:"same-origin"})才能拥有Cookie.

When you're sending requests to your server (form submissions, XHR/AJAX API requests or anything else that takes user into account), never trust the client input and don't even send to the server who you think you are - but check what the session says. This means you have to make sure to pass cookies around, e.g. with fetch you need fetch(url, {credentials: "same-origin"}) for the request to have cookies.

基本上，传递数据时React必须知道是JSON文档(通过模板嵌入或API端点响应)，并且如果修改了这些数据，也不要让服务器做任何错误的事情.

Basically, pass the data React has to know as JSON documents (via template embedding or API endpoint response), and don't let server do anything wrong if that data is modified.

这篇关于使用ReactJS访问Flask会话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！