[英]Angular 2 and Webpack lazy loading
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. 我正在开发用户登录的Angular 2应用程序。登录后,用户将能够访问仅对登录用户可见的安全组件。 How can i seperate Webpack to first serve the login screen and only after a succesfull login the rest? 我怎样才能分开Webpack来首先为登录屏幕提供服务,而只有在成功登录后再提供其余服务?
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. 在chrome开发工具中的angular2-authentication-sample中,我可以在登录之前查看所有源代码。即使只有登录后才可见的页面源代码。
So my question is: 所以我的问题是:
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. 在上面的示例中,所有路由都将下载到单个bundle.js
文件中。 To change that you can use power of require.ensure
. 要进行更改,可以使用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). 将受保护的路由包装在require.ensure
并使用第三个参数将此块命名为protected
(此名称可以不同-只是示例)。
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: 在webpack.config.js
如果您具有以下配置:
entry: path.resolve('src', 'main.js'),
output: {
path: path.resolve('build'),
filename: '[name].js', // <-- this is important
publicPath: '/'
},
The webpack will produce this files: Webpack将产生以下文件:
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 . 现在,您必须在支持上提供自己的保护-不会为未经身份验证的用户发送*.protected.js
文件 。
If you do not want all of your code to be on the client side, you can use something like: 如果您不希望所有代码都在客户端,则可以使用以下方法:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.