Блог

У меня есть интерфейс React, подключенный к серверной части Flask. Я пытаюсь авторизовать пользователя с помощью react-google-login. В настоящее время я отправляю токен ответа на серверную часть для проверки и входа пользователя.

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

Я сохраняю токен в серверной части как session['token'] . Затем в моем родительском компоненте приложения я вызываю серверную часть, чтобы проверить, 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>
    );
};
  

Все это работает до сих пор, но когда я обновляю страницу, кажется, что она забывает сеанс. Кто-нибудь может посоветовать лучшую стратегию для этого процесса входа в систему или что здесь происходит не так?

Состояние в react не является постоянным, т. е. все исчезнет при обновлении страницы. Что вам нужно сделать, это сохранить данные в чем-то вроде локального хранилища или файлов cookie.