Проверьте токен перед отправкой истории на маршрутизатор

Question

Я считаю, что это очень простой вопрос, но я не привык к миру асинхронных звонков / вызовов.

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

Проблема:
axios вызов возвращает мне правильное значение, но страница не подталкивает аутентифицированного пользователя к правильной странице ресурсаconsole.log показывает мне 1 then и остается на странице входа в систему

App.js

const PrivateRoute = ({component: Component, isAuthorized, ...otherProps}) => (
  <Route
    {...otherProps}
    render={props => (
      isAuthorized() ? (<Component {...props} />) :
        (
          <Redirect to={
            {
              pathname: '/',
              state: {from: props.location},
            }
          }
          />
        )
    )}
  />
);

function verifyToken(isAuthenticated){
  if (isAuthenticated) {
    axios.post(`${BACKEND_URL}/api-token-verify/`, {
      token: getAuthToken()
    }).then((res) => {
        console.log('then');
        return true;
      })
      .catch((err) => {
        console.log('err');
        return false;
      });
  } else {
    console.log('ahaha');
    return false;
  }
}

// Deal with an ordinary outdated token. Hacked one will be handle on individual component
function hasToken() {
  const token = localStorage.getItem('authToken');
  const isAuthenticated = !((token === undefined) | (token === null));

  return verifyToken(isAuthenticated);
}


class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Switch>
            <Route exact path='/' component={Login}/>
            <PrivateRoute exact path='/simulator/' isAuthorized={hasToken} component={Simulator}/>
          </Switch>
        </BrowserRouter>
      </Provider>
    )
  }
}

export default App;

Вопрос:
Как я могу его запуститькак последовательный заказ?

Ответ:
Благодаря m0meni его ответ и комментарий решают мою проблему.Вот мое решение, основанное на его ответе.Я решил поставить свое решение здесь, так как в будущем я мог бы забыть его.Я делаю новый Component и называю его Container.Так как я не могу поставить redux на этом уровне.

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    )
  }
}

Container.js

import React, {Component, Fragment} from 'react';
import {BrowserRouter, Redirect, Route, Switch} from 'react-router-dom';
import Simulator from "../../simulators/components/Simulators";
import Login from "../../frontpage/components/login";
import {connect} from 'react-redux';
import {CHECK_TOKEN} from "../../constants";

const PrivateRoute = ({component: Component, isAuthorized, ...otherProps}) => (
  <Route
    {...otherProps}
    render={props => (
      isAuthorized() ? (<Component {...props} />) :
        (
          <Redirect to={
            {
              pathname: '/',
              state: {from: props.location},
            }
          }
          />
        )
    )}
  />
);


// Deal with an ordinary outdated token. Hacked one will be handle on individual component
function hasToken() {
  const token = localStorage.getItem('authToken');
  return !((token === undefined) | (token === null));
}


class Container extends Component {
  /*
  * In order to do redux staff and not to mess up with top most <App/>
  * Container has been created to contain them all
  *
  * */
  constructor(props) {
    super(props);
    this.props.validateToken();
  }

  render() {
    console.log(this.props);
    const {isAuthenticated, wrapper} = this.props;
    console.log(typeof this.props.wrapper);
    if((typeof this.props.wrapper) === 'function') {
      console.log('this is function');
      return (
        <Fragment>
          <BrowserRouter>
            <Switch>
              <Route exact path='/' component={Login}/>
              <PrivateRoute exact path='/simulator/' isAuthorized={this.props.wrapper} component={Simulator}/>
            </Switch>
          </BrowserRouter>
        </Fragment>
      )
    }else{
      console.log('wrapper is not a function');
      console.log(typeof this.props.wrapper);
      return null;
    }
  }
}

const mapStateToProps = ({verifyTokenReducer}, ownProps) => {
  return verifyTokenReducer
};

const validateToken = () => {
  return {
    type: CHECK_TOKEN,
    payload: undefined
  }
};

export default connect(mapStateToProps, {validateToken})(Container);

reducers.js

import {GOOD_TOKEN, INVALID_TOKEN} from "../constants";

function immediateReturnTrue(){
  return true;
}
function immediateReturnFalse(){
  return false;
}

export const VerifyTokenReducer = (state = {}, action) => {
  switch (action.type) {
    case GOOD_TOKEN:
      return {
        isAuthenticated: true,
        wrapper: immediateReturnTrue
      };
    case INVALID_TOKEN:
      return {
        isAuthenticated: false,
        wrapper: immediateReturnFalse
      };
    default:
      return state;
  }
};

Answer 1

Ключевым моментом здесь является то, что verifyToken будет никогда вернет true, потому что ветвь if ничего не возвращает, а ветвь else возвращает false.return true внутри вашего обещания находится внутри обратного вызова внутри .then, что означает, что return true не относится к функции verifyToken, но анонимная функция внутри .then.

Чтобы это исправить, вам нужно вернуть обещание из функции verifyToken и обработать его как обещание в компоненте PrivateRoute.Прямо сейчас ваша рендер-опора обрабатывает обещание, как если бы оно было сразу доступным значением, а не обещанием.(вы нигде не используете .then)

render={props => (
  isAuthorized() ? (<Component {...props} />) :
    (
      <Redirect to={
        {
          pathname: '/',
          state: {from: props.location},
        }
      }
      />
    )
)}