javascript - NodeJS 登录后动态加载 Angular 模块

Question

首先很抱歉，我在 npm 上没有太多的经验，所以请原谅我 ^^

我有一个使用 Angular 的 http 服务器。现在我在index.html 上加载所有需要的模块，例如:

<!-- internal js files -->
<script src="app.module.js"></script>
<script src="app.config.js"></script>

<script src="do/something.module.js"></script>
<script src="do/something.component.js"></script>
<script src="do/another_thing.module.js"></script>
<script src="do/another_thing.component.js"></script>

因此，当网站加载时，它还会加载所有模块，而不验证我是否“允许查看它们”。这反过来又使其(恕我直言)成为一个巨大的安全风险，因为攻击者可以看到网站的功能以及它如何调用模块中的私有(private) API...

正如我所说，我在这方面确实没有经验。所以我只是想知道:常见的做法是什么？您将如何解决这个问题？

Answer 1

$injector.loadNewModules 支持延迟加载 AngularJs (v1.x) 模块(^v1.6.x)。

此示例假设 angularjs v1.6.x 和 @uirouter/angularjs v1.x.x

为了防止 Angular 模块位于应用程序包内，它不应该成为应用程序依赖关系树的一部分，这意味着 Angular 模块admin不会被导入并用作 app Angular 模块的一部分。

// router config

$stateProvider
  .state('admin', {
    abstract: true,
    url: '/admin',
    onEnter: /*@ngInject*/ (userService, $stateParams) => {
      return userService.getUserFromToken($stateParams.propertyId);
    },
    lazyLoad: $transition$ => {
             // this dynamic import tells webpack to split the admin-panel module (and it dependencies) from the app bundle
      return import(/* webpackChunkName: "admin" */ '../admin-panel/admin-panel.module').then(
        module => $transition$.injector().loadNewModules([module.AdminPanelModule],
      );
    },
  })
  .state('admin.main', { // inherits from admin abstract state
    url: '/',
    views: {
      '@': {
        component: 'dashboard',
      },
    },
  });

使用此状态配置，每当您的应用导航到任何 admin 页面(继承自抽象 admin 状态)时，onEnter 将检查用户是否具有该页面的权限，然后将调用 lazyLoad (仅在第一次)，以便将 admin.panel.module 加载到应用程序模块。