Компоненты с ленивым загрузчиком, требующие аутентификации с помощью реакции-сокращения

Question

Я пытаюсь создать веб-сайт с помощью реакции + redux. Я уже установил подлинность jwt на сервере. Что бы я хотел сделать, это ленивая загрузка некоторых моих компонентов/контейнеров и редукторов, чтобы их можно было загружать только прошедшим проверку пользователям. Я уже знаю, как скрывать компоненты от не прошедших проверку подлинности пользователей (на стороне клиента), но я бы предпочел не допустить их загрузки относительного кода JavaScript.

Я использую webpack, и я уже изучил реактивный маршрутизатор и require-ensure (https://stackoverflow.com/a/33044701/2920112), но этот подход, похоже, вообще не обрабатывает аутентификацию. Я также рассмотрел использование fetch в некотором роде (возможно, связав частный код отдельно с webpack), но я не знаю, что делать с пакетом, как только я его извлечу.

Я приближаюсь к проблеме не так? Единственная альтернатива, которую я вижу, состоит в том, чтобы предоставить два файла HTML, одну загрузку пакета webpack только с общедоступным контентом, а также загрузку личного кода. Однако это кажется субоптимальным. Каков правильный подход?

Answer 1

Мы решили эту проблему с помощью реакции-маршрутизатор:

<Route 
    key="secured_component" 
    path="/secured" 
    onEnter={handleEnterSecuredComponent} 
    getComponent=({nextState, cb) => { 
     require.ensure([],() => { 
      cb(null, require('YourComponent').default); 
     }); 
    }} 
/> 
... 
const handleEnterSecuredComponent = (nextState, replace) => { 
    const {login: {success}} = store.getState(); 
    if (!success) { 
     replace('/login'); 
    } 
}; 

Так что ваша страница Войти должны установить в Redux {Логин: {успех: истинно}}, если проверка подлинности пользователя. Если аутентифицированный пользователь пытается получить доступ/защищен, он будет перенаправлен в/login.

require.ensure не играет никакой роли в аутентификации. Это просто точка входа для webpack, чтобы разделить кусок js-файлов для ленивой загрузки.