Angular 2+安全; 保护服务器上的延迟加载模块

Question

我有一个Angular 2+应用程序,用户输入个人数据.此数据在应用程序的另一部分中进行分析,该部分仅适用于具有特定权限的人员.问题是我们不希望未经授权的人知道我们如何分析这些数据.因此,如果他们能够在应用程序中查看模板,那就太糟糕了.由于它是一个客户端应用程序,精明的用户总是可以调整应用程序,并查看模板.使用路由保护,延迟加载,并且CanLoad不会在这里保护我们,因为所有模块都可以通过简单的HTTP请求获得,并且足够精明的用户可以找到资源的URL.

我理解处理这个的常用方法是使用单独的应用程序.在这种情况下,将有三个,一个用于登录/注册,一个用于用户输入数据,一个用于具有分析数据的特定权限的人.

这对我来说并不理想,因为这需要管理三个不同的代码库.

我认为必须有一种方法来保护服务器端的Angular 2+延迟加载模块.我已经阅读了关于这个主题的几个讨论,但似乎没有人像我一样确定需要这个的理由:

https://groups.google.com/forum/#!topic/angular/ZYHwNwPfIzY https://www.reddit.com/r/Angular2/comments/56dqsd

第二个链接似乎暗示现在可以使用命名块,并在Webpack中向延迟加载请求添加标记/ cookie.

我没有看到有关如何实现这一目标的更多信息.任何人都可以为我提供一个完成这个的例子.这个策略有名字吗？

注意:我确实意识到这仍然不是100%安全,因为总是有可能从经过身份验证的用户的浏览器缓存中删除模块.为了避免冗长的讨论,我会说我们根本不担心.

Answer 1

为什么不将您的应用程序设置为动态地从服务器 IFF 传回 html（当且仅当）用户拥有正确的权限。

您必须假设客户端可以访问该页面。该页面只是一个带有 [innerHtml]="responseHTMLFromYourServer" 的空白 div。

加载动态组件有以下几种方法：

@Directive({
  selector: '[template-host]'
})
export class HostDirective{

  @Input('template-host') set templateHtml(value){
    this.hostElement.innerHTML = value;
  }

  private hostElement:HTMLElement;

  constructor(elementRef:ElementRef){
    this.hostElement = elementRef.nativeElement;
  }
}

// Usage
<div [template-host]="myTemplate"></div>

如何获取 ng-template insideHTML 到组件