Как из flask передать роутер на react?

Question

[Сергей]

Здравствуйте, сегодня делал авторизацию пользователей. Так вот, никак не понимал как сделать так чтобы для гостя отображалась одна часть сайта, а для авторизированных другая.
Я создал обычную функцию которая принимает из фронт-энда данные и сравнивает их с данными пользователя, и если данные которые пришли верны, то сервер возвращает клиенту сообщение.

from flask import Flask, jsonify, request

@app.route('/log', methods = ['POST'])
def post():
	if request.form.get('login') == 'admin' and request.form.get('pass') == 'zx23ww':
			return jsonify({'type':'success','msg':'success'})
	return jsonify({'type':'error','msg':'error'})

Как выглядит фронт-энд(форма авторизации):

import React, { Component } from 'react';
import $ from 'jquery';

class Auth extends Component {

componentDidMount() {
document.title = 'Авторизация';

$('#sub-log').click(function(event, result) {
    event.preventDefault();
    $.post($('#log-form').attr('action'), $('#log-form').serialize(), function(result) {
		console.log(result);
		var msg = JSON.stringify(result);
		$('#msg').html(msg).show().delay(5000).hide(1);
    });
});
}

render() {
return (<code lang="html">
<div>
<form action = 'http://localhost:5000/log' method = 'post' id = 'log-form' className = 'log-form-active'>
<input type="text" name="login" placeholder="Ваш логин"/>
<input type="password" name="pass" placeholder="Ваш пароль"/>
<button id = 'sub-log'>CLICK</button>
</form>
<div id  = 'msg'></div>
</div></code>);
  }
}
export default Auth;

app.js:

import React, { Component }from 'react';
import * as serviceWorker from './serviceWorker';

import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route} from 'react-router-dom';

import Auth from './Auth';
import Feed from './Feed';

class Main extends Component {
render() {
return (<code lang="html">
<Router>
<div id = 'content'>
<Route path='/' exact component={Auth} />
<Route path='/feed' exact component={Feed} />
</div>
</Router></code>);
  }
}

ReactDOM.render(<Main />, document.getElementById('main'));

В общем сидел мучил гугл, так и нашёл толкового ответа, как вернуть клиенту определённые роутеры(допустим /home, /feed), а другие убрать (допустим /login), или допустим если пользователь не авторизирован то часть функционала сайта урезать? Читал про токены, но так и не понял как они могут использоваться в роутинге страниц.

Заранее БОЛЬШУЩАЯ БЛАГОДАРНОСТЬ!
Простите что загружаю такими вопросами, но это поставило меня в тупик, может будут примеры?

Answer 1

[Антон Спирин]

1. Выпилить из проекта JQuery.
2. Почитать документацию React о том как работать с формами.
3. По-хорошему, добавить в проект Redux.

Простой пример решения вашей проблемы без использования Redux:

class Main extends Component {
  state = {
    isInitializing: true,
    isSignedIn: false,
    user: null,
  };

  async componentDidMount() {
    // тут достаем токен, например, из cookie
    const token = storage.get(TOKEN_KEY); 
    
    if (token) {
       // тут сетим токен в заголовки по-умолчанию библиотеки для HTTP-запросов
      api.setHeader('Authorization', `Bearer ${token}`);

      const user = await api.getUser();

      this.setState({ user, isSignedIn: true, isInitializing: false });
    } else {
      this.setState({ isInitializing: false });
    }
  }

  render() {
    const { isSignedIn, isInitializing } = this.state;
    
    // на время инициализации показываем ProgressBar
    if (isInitializing) return <ProgressBar />;    

    return (
      <code lang="html">
        <Router>
          <div id = 'content'>
            {isSignedIn ? (
              <React.Fragment>
                <Route path='/feed' exact component={Feed} />
                <Redirect from='/' to="/feed" />
              </React.Fragment>
            ) : (
              <React.Fragment>
                <Route path='/' exact component={Auth} />
                <Redirect from="/feed" to="/" />
              </React.Fragment>
            )}
          </div>
        </Router>
      </code>
    );
  }
}

Все же, советую использовать redux. А в качестве HTTP клиента - axios.
При использовании redux процесс инициализации выносится в action:

const store = configureStore();
store.dispatch(init()); // начинаем процесс инициализации еще до монтирования приложения

ReactDOM.render(
  <Provider store={store}>
    <Main />
  </Provider>, document.getElementById('main'),
);