Leniwy element ładujący wymagający uwierzytelnienia z reagującym reduxem

Question

Próbuję stworzyć stronę internetową za pomocą metody reakcji + redux. Mam już skonfigurowane uwierzytelnianie jwt na serwerze. Co chcę zrobić, to leniwy załadować niektóre z moich komponentów/pojemników i reduktorów, aby mogły być pobierane tylko przez uwierzytelnionych użytkowników. Już wiem, jak ukrywać komponenty przed nieuwierzytelnionymi użytkownikami (po stronie klienta), ale wolałbym, aby nie pobierano kodu względnego javascript.

Używam webpacka i już sprawdziłem router reagowania i require-ensure (https://stackoverflow.com/a/33044701/2920112), ale to podejście w ogóle nie obsługuje uwierzytelniania. Rozważałem też w pewnym sensie używanie fetch (prawdopodobnie łączenie prywatnego kodu oddzielnie z pakietem internetowym), ale nie wiedziałbym, co zrobić z pakietem po jego pobraniu.

Czy podchodzę do problemu w niewłaściwy sposób? Jedyną alternatywą jaką widzę jest dostarczenie dwóch plików HTML, jeden ładujący pakiet Webpack tylko z publiczną treścią i jeden pobierający również prywatny kod. Wydaje się to jednak naprawdę nieoptymalne. Jakie jest prawidłowe podejście?

Answer 1

Rozwiązaliśmy to za pomocą reagować-Router:

<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'); 
    } 
}; 

Więc strona logowania należy ustawić w Redux {logowanie: {sukces: true}} Jeśli użytkownik jest uwierzytelniony. Jeśli uwierzytelniony użytkownik spróbuje uzyskać dostęp/zabezpieczony, zostanie przekierowany do/login.

the require.ensure nie odgrywa żadnej roli uwierzytelniania. To po prostu punkt wejścia dla webpacka, aby podzielić porcję plików js na leniwy załadunek.