Question

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

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

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

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

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

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

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

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

Answer 1

为什么不将应用设置为将HTML动态从服务器IFF动态传递回（如果且仅当用户具有正确的权限时）。

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

有一些加载动态组件的方法：

@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>

How to get ng-template innerHTML to component

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

1 个答案: