Отправить запрос на проверку роли перед рендерингом компонента c

Question

У меня есть такая структура проекта:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import {store, persistor} from './helpers';
import { Main } from './main';
import { PersistGate } from 'redux-persist/integration/react';
import { InitIDB } from './helpers/InitIDB';

require('./bootstrap');
InitIDB();

render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <Main />
        </PersistGate>
    </Provider>,
    document.getElementById('root')
);

Это точка входа, а затем главный компонент:

import React from 'react';
import { Route, Switch, Router } from 'react-router-dom';
import { connect } from 'react-redux';

import { history } from '../helpers';
import {PrivateRoute} from "../components";
import { ProjectPage } from '../forms/project';
import { ProfilePage } from '../forms/profile';
import { Login } from '../forms/login';

class Main extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <React.Fragment>
                <Router history={history}>
                    <Switch>
                        <Route exact path="/login" component={Login} />
                        <PrivateRoute exact path="/com/projects" component={ProjectPage} />
                        <PrivateRoute exact path="/com/profiles" component={ProfilePage} />
                    </Switch>
                </Router>
            </React.Fragment>
        );
    }
}

function mapState(state) {
    const { alert } = state;
    return { alert };
}

const actionCreators = {
    clearAlerts: function() {}
}

const connectedApp = connect(mapState, actionCreators)(Main);
export { connectedApp as Main };

// PrivateRoute

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import {LayoutX} from '../forms/layout';

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        sessionStorage.getItem('user')
            ? <LayoutX><Component {...props} /></LayoutX>
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

Я хочу, когда пользователь получает доступ к частному маршруту, перед этим программа отправит запрос на сервер и вернет ответ, решив, пользователь может получить доступ к этой странице или нет. Я пытаюсь отправить запрос с ax ios в PrivateRoute, но это асин c запрос, и я не могу получить ответ до рендера. Что мне делать?

Answer 1

Ваш PrivateRoute должен блокировать рендеринг при ожидании возвращения статуса аутентификации из API.

Вы можете взглянуть на простую реализацию PrivateRoute Я написал в этом codesandbox .