时间戳

首页 > 解决方案 > NodeJS在登录后动态加载角度模块

javascript - NodeJS在登录后动态加载角度模块

问题描述

首先我很抱歉，但是我在npm中没有很多exp所以请原谅我^^

我有一个使用 Angular 的 http-server。现在我在 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>

因此，当网站加载时，它还会加载所有模块，而无需验证我是否“允许查看它们”。这反过来又使它（恕我直言）成为一个很大的安全风险，因为攻击者可以看到网站做了什么以及它如何调用模块中的私有 API ......

如前所述，我在这方面真的没有经验..所以我只是想知道：常见的做法是什么？您将如何/您解决了这个问题？

标签： javascriptnode.jsangularjssecurity

解决方案

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

这个例子假设angularjs v1.6.x&@uirouter/angularjs v1.x.x

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

// 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到应用程序模块。

推荐阅读