yspb

Как это реализован в одном моем сервисе. При авторизации создается токен, который дальше отправляется со всеми запросами от пользователя. Как только с данного аккаунта делается еще одна авторизация, то создается новый токен, а все предыдущие обнуляются и запросы с этим токенами начинают возвращать 403 ошибку.

function startEmptyFlop() {
    console.time('Watcher');

    // bla-bla-bla

    console.timeEnd('Watcher');
}

> startEmptyFlop()
Watcher: 0.007ms

/proc/1781/cmdline

'user.name'.split('.').reduce((obj, key) => obj[key], filter_params)

Лучше сразу писать изоморфный проект, так как есть множество ньюансов которые стоит учитывать при разработке таких приложений. На github можно найти готовые боилерплейты. На написание своего может уйти от пары часов до пары дней, в зависимости от требуемого набора инструментов. Так же вы можете посмотреть в сторону таких инструментов как next.js, razzle, after . Но точно не знаю, насколько легко, при необходимости, мигрировать с таких решений.

Примерно так это можно сделать:

Ваш компонент:

import { login } from './loginDucks';

class UserForm extends Component {
  ...
  handleSubmit = e => {
    this.props.login(this.state.form);
  }
  ...
  render() {
      const { isLoading, isError, shouldRedirect } = this.props;
      if (shouldRedirect) <Redirect to="/index" >;

    return (
      ...
    );
  }
}

const mapStateToProps = state => ({
  isLoading: state.login.isLoading,
  isError: state.login.isError,
  shouldRedirect: state.login.shouldRedirect,
});

const mapDispatchToProps = {
  login,
};

export default connect(mapStateToProps, mapDispatchToProps)(UserForm);

loginDucks.js

const LOGIN_REQUEST = 'LOGIN_REQUEST';
const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_ERROR = 'LOGIN_ERROR';

const loginSuccess = data => ({
  type: LOGIN_SUCCESS,
  payload: data,
});

const loginError = data => ({
  type: LOGIN_ERROR,
});

export const login = form => async dispatch => {
  try {
    const res = await axios.post('/api/user', form);

    if (!res.data) dispatch(loginError());
    
    dispatch(loginSuccess());
  } catch e {
    dspatch(loginError());
  }
}

const initialState = {
  isLoading: false,
  isError: false,
  shouldRedirect: false,
};

export default (state = initialState, action) => {
  const { type, payload } = action;

  switch(type) {
    case LOGIN_REQUEST:
      return { 
        ...state,
        isLoading: true,
        isError: false,
      };
    case LOGIN_SUCCESS:
      return { 
        ...state,
        isLoading: false,
        shouldRedirect: false,
      };
    case LOGIN_ERROR:
      return  { 
        ...state,
        isLoading: false,
        isError: true,
      };
    default:
      return state;
  }
};

import React from 'react';
import ReactDOM from 'react-dom';
import  { Provider } from 'react-redux';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Auth from './component/AuthForm';
import Helmet from './aplication';
import loginReducer from './loginDucks';

function user(state = {}, action){
    if(action.type === 'ADD_USER'){
        return [
            ...state,
            action.user
        ];
    }
    return state;
}

const rootReducer = combineReducers({
  login: loginReducer,
  user,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk),
));

ReactDOM.render(
        <div>
            ...
        </div>,
    document.getElementById('content')

['a1', 'a2', 'a3'].forEach(id => document.getElementById(id).style.display = 'none')