Question

我有一个连接到Flask后端的React前端。我正在尝试让用户使用react-google-login登录。我目前正在将响应令牌发送到后端进行验证并登录用户。

fetch('/login', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          token: response.accessToken
       })
      })

我将令牌在后端另存为session['token']。然后，在我的父级App组件中，调用后端以检查len(session) == 0是否查看用户是否登录。

@app.route('/_loggedin')
def loggedin():
    if len(session) == 0:
        return {'isLogged': False}
    return {'isLogged': True}

@app.route('/login', methods=['POST'])
def login():
    content = request.get_json()
    session['token'] = content['token']
    return {'status': 0}

这会更改状态，以指示用户已登录并授权了一条专用路由。

function App() {
    const [authed, setAuthed] = useState();
    useEffect(() => {
        fetch('/_loggedin').then(res => res.json()).then(data => {
          setAuthed(data.isLogged);
        });
      }, []);
    return(
        <Router>
            <Switch>
                <Route path="/login">
                    <Login />
                </Route>
                <PrivateRoute authed={authed} path='/' component={Home} />
            </Switch>
        </Router>
    );
};

所有这些到目前为止都有效，但是当我刷新页面时，似乎忘记了会话。谁能为这个登录过程提供更好的策略建议，或者这里出了什么问题？

Answer 1

react状态不是持久性的，即刷新页面时一切都会消失。您需要做的是将数据持久保存在本地存储或Cookie中。

如何在Flask和React中刷新页面之间保持用户登录

1 个答案: