Lazy load components requiring authentication with a reduct reduction

Question

I am trying to create a website using reaction + redux. I have already installed jwt authentication on the server. What I would like to do is lazy loading some of my components / containers and gearboxes so that only authenticated users can load them. I already know how to hide components from unauthenticated users (client side), but I would prefer to prevent them from loading relative JavaScript code.

I am using webpack and I have already covered reactive router and require-ensure ( https://stackoverflow.com/a/165269/ ), but this approach does not seem to authenticate authentication completely. I also considered using fetch in some way (perhaps by linking the private code separately to webpack), but I don’t know what to do with the package as soon as I extract it.

Am I approaching the problem wrong? The only alternative I see is to provide two HTML files, one download of the webpack package with only public content, and also download the private code too. However, this seems suboptimal. What is the right approach?

Answer 1

We solved this with a jet 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'); } }; 

So, your login page should be set to redux {login: {success: true}} if the user is authenticated. If the authenticated user is trying to access / secure, he will be redirected to / login.

require.ensure does not play any role of authentication. This is just an entry point for webpack to split a piece of js files for lazy loading.