Реализация ПРОСТОЙ токен авторизации между Flask и React?

Question

[Ложка в мозге]

Вечер в хату!
Если бы вы знали как меня достала эта токен авторизация, я ничего не понимаю, кучу примеров в гугле (непонятной сложности) так и не помогли мне в этом вопросе. А мне всего-то нужно что-бы часть роутеров для гостей была закрыта, а для авторизованных была открыта.
У меня есть простая авторизация на flask (без mongodb, mysql, и тд.)

@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'})

Вроде начало доходить как это сделать на бекэнде, так мне реакт подсунул Redux. У меня вопрос, когда закончатся эти библиотеки? Что не день то +20 библиотек, я уже начал думать заниматься чем-то другим, а не программированием...

Так вот, будут ли ПРОСТЫЕ примеры реализации токен авторизации между этими двумя фреймворками?

Answer 1

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

Так вот, будут ли ПРОСТЫЕ примеры реализации токен авторизации между этими двумя фреймворками?

Проще некуда:

import React from 'react';
import Cookie from 'js-cookie';

class SimpleExample extends React.Component {
  state = {
    isProcessing: false,
    token: Cookie.get('token'),
    data: null,
  };
  
  handleSignIn = () => {
    this.setState({ isProcessing: true });

    fetch('/singin', { 
      method: 'POST',
      data: JSON.stringify({ login: 'admin', pass: 'zx23ww' }),
    })
    .then(res => res.json())
    .then(data => {
      this.setState({
        isProcessing: false,
        token: data.token,
      });
        
      Cookie.set('token', token);
    });
  };
  
  handleLogout = () => {
    Cookie.erase('token');
    this.setState({ token: null });
  };

  handleGetProtectedData = () => {
    fetch('/protected'{
      method: 'GET',
      headers: {
        Authorization: `Bearer ${this.state.token}`,
      },
    })
    .then(res => res.json())
    .then(data => {
      this.setState({ data });
    });
  };

  render() {
    const { isProcessing, token } = this.state;
    
    if (isProcessing) return <div>...initialization</div>;

    const isSignedIn = !!token;

    return isSignedIn ? (
      <div>
        <h1>You're signed in</h1>
        <button onClick={this.handleLogout}>Logout</button>
        <button onClick={this.handleGetProtectedData}>Get protected data</button>
      </div>
    ) : (
      <div>
        <h1>You're not signed in</h1>
        <button onClick={this.handleSignIn}>Sign in</button>
      </div>
    );
  }
}