Angular 2 and Webpack lazy loading

Question

I am surely missing something very fundamental here. I am developing an Angular 2 app where the user logs in. After login the user will be able to access secured components that are only visible to logged in users. How can i seperate Webpack to first serve the login screen and only after a succesfull login the rest?

In angular2-authentication-sample in chrome dev tools I can see all the source code before logged in. Even the source code of the pages that are visible only after login.

So my question is:

What is the right way to restrict users of having an access to source code of the section that is behind a login screen.

Why does it matter if they can see the JS source code? It shouldn't contain any data. — mpen
– mpen, Commented Jul 17, 2016 at 22:59
True, the actual data is secured by JWT. But still i believe there should be a way to keep html code of the login secured pages hidden from the users that are not having credentials to login. — Adulakis
– Adulakis, Commented Jul 17, 2016 at 23:09
You might want to have a look at this medium post using angular2 router lazy loading and webpack angular2-router-loader — superjos
– superjos, Commented Jan 5, 2017 at 12:20

Everettss · Accepted Answer · 2016-07-18 08:17:05Z

3

You can use power of dynamically loaded chunks. For example imagine this mockup of routing:

switch(routeName) {
  case 'home':
    const homePage = require('homePage');
    homePage();  
    break;
  case 'contact':
    const contactPage = require('contactPage');
    contactPage(); 
    break;
  case 'dashboard':                             // <-- this should be protected
    const dashboardPage = require('dashboardPage');
    dashboardPage(); 
    break;
  case 'informationForLoggedUser':               // <-- this should be protected
    const informationForLoggedUserPage = require('informationForLoggedUserPage');
    informationForLoggedUserPage(); 
    break;
};

In above example all your routes will be downloaded in single bundle.js file. To change that you can use power of require.ensure. Wrap your protected routes in require.ensure with 3rd parameter naming this chunk as protected (this name can be different - it's just example).

switch(routeName) {
  case 'home':
    const homePage = require('homePage');
    homePage();  
    break;
  case 'contact':
    const contactPage = require('contactPage');
    contactPage(); 
    break;
  case 'dashboard':                             // <-- this will be protected
    require.ensure([], () => {
      const dashboardPage = require('dashboardPage');
      dashboardPage(); 
    }, 'protected');
    break;
  case 'informationForLoggedUser':               // <-- this will be protected
    require.ensure([], () => {
      const informationForLoggedUserPage = require('informationForLoggedUserPage');
      informationForLoggedUserPage(); 
    }, 'protected');
    break;
};

In your webpack.config.js if you will have this configuration:

entry: path.resolve('src', 'main.js'),
output: {
  path: path.resolve('build'),
  filename: '[name].js',       // <-- this is important
  publicPath: '/'
},

The webpack will produce this files:

main.js
1.protected.js

Now you must provide on your own protection on the backed - to not send *.protected.js file for not authenticated users.

edited Jul 18, 2016 at 8:17

answered Jul 18, 2016 at 7:51

Everettss

16.2k9 gold badges78 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adulakis Over a year ago

Does this actually work with the routing on current Angular 2 RC4?

Everettss Over a year ago

My answer is framework agnostic. If properly applied it should work with: angular / angular 2 / react / ember / or what you prefer.

Adulakis Over a year ago

Seems tricky with Angular 2 as the routes has to be given as an array of objects that will be all loaded at the init and AsyncRoute is not there anymore. Actual route example

Everettss Over a year ago

You can use require.ensure on Home component level (I assume that Home component should be available after authentication).

KB_ · Accepted Answer · 2016-07-17 23:10:41Z

0

If you do not want all of your code to be on the client side, you can use something like:

Angular Universal

Angular Universal starter

Angular Universal Github page

answered Jul 17, 2016 at 23:10

KB_

2,1232 gold badges26 silver badges28 bronze badges

2 Comments

Adulakis Over a year ago

Thanks, but is this really the only/best way to keep my html code hidden? I was expecting there to be a way to lazy load the pieces of the html code once the template is needed.

KB_ Over a year ago

As long the data is on the server ,the client will not see it.The same applies to HTML and everything in it. Ask the server to load the home page after log in. You can use any server you like.

Collectives™ on Stack Overflow

Angular 2 and Webpack lazy loading

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related