Разделение кода приложения-администратора по пакетам до и после входа в систему

Question

Рассмотрим приложение реакции-администратора, подобное представленному ниже.Я планирую разделить код таким образом, чтобы все в './posts' и './users' загружалось только после того, как пользователь вошел в систему.

Я планирую использовать синтаксис dynamic import () , который я могу использовать, чтобы webpack автоматически запускал разделение кода приложения.

Проблема, которую я вижу, состоит в том, что все компоненты приложения импортируются с определением приложения.Динамический импорт материала в './posts' и './users' не будет разделен, так как он импортирован в самом приложении.

Как я могу настроить и разделить эту кодовую базу, чтобы вещи в './posts' и './users'загружается только после входа в систему?

import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in 
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, UserCreate, UserIcon } from './users';
// ∧∧∧

class App extends Component {
    render() {
        return (
            <Admin
                title="MyApp"
                loginPage={Login}
                dataProvider={dataProvider}
                authProvider={authProvider}
                i18nProvider={i18nProvider}
            >
                <Resource
                    name="posts"
                    list={PostList}
                    edit={PostEdit}
                    create={PostCreate}
                    icon={PostIcon}
                />
                <Resource
                    name="users"
                    list={UserList}
                    edit={UserEdit}
                    create={UserCreate}
                    icon={UserIcon}
                />
            </Admin>
        );
    }
}
export default App;

Answer 1

Оберните ваши компоненты "posts" и "users" с реагирующей загрузкой.

Мои недавние использования (работа с чистым приложением Reaction-Router и Act-Admin!)

import Loadable from 'react-loadable';

const AsyncCrontabList = Loadable({
    loader: () => import('./containers/Crontab/CrontabList'),
    loading: Loading
});

<Resource name="crontabs" context="interval"
                              options={{ label: 'Crontabs', group: 'Automation' }}    icon={<TimerIcon/>}
                              list={AsyncCrontabList}
                              create={AsyncCrontabCreate}
                              edit={AsyncIntervalEdit}/>

После этого я вижу, что компоненты разбиты на части в F12 - Debug. Как я знаю, эти куски будут загружены (фактически импортированы), когда мы перейдем к правильному пути. А с помощьюact-admin ресурс идентифицируется и перемещается по имени, поэтому при применении загружаемого метода он будет работать! Это мои варианты использования.

Answer 2

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

import React, { Component } from 'react';
import { Admin, Resource } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';
// vvv - to be loaded after the user has logged in 
import { PostList, PostEdit, PostCreate, PostIcon } from './posts';
import { UserList, UserEdit, UserCreate, UserIcon } from './users';
// ∧∧∧

class App extends Component {
   state:{
     loggedIn: false,
          }
    onLoginSuccess(){
     this.setState({loggedIn: true});
     }
    render() {
        return (
            <Admin
                title="MyApp"
                loginPage={Login}
                onLoginSuccess={this.onLoginSuccess.bind(this)}
                dataProvider={dataProvider}
                authProvider={authProvider}
                i18nProvider={i18nProvider}
            >
               {(this.state.loggedIn) && 
                  <Resource
                    name="posts"
                    list={PostList}
                    edit={PostEdit}
                    create={PostCreate}
                    icon={PostIcon}
                />
                <Resource
                    name="users"
                    list={UserList}
                    edit={UserEdit}
                    create={UserCreate}
                    icon={UserIcon}
                />
             }
            </Admin>
        );
    }
}
export default App;

или лучший способ - создать отдельный файл маршрутов и обработать его. вся эта логика там