安全地保护延迟加载的模块（Angular 2）答案

【问题标题】：Securely Guarding Lazy-Loaded Modules (Angular 2)安全地保护延迟加载的模块（Angular 2）
【发布时间】：2017-07-04 14:25:16
【问题描述】：

我正在开发一个应用程序，我有一个用户区和一个管理区。我已将它们分成单独的 Angular 2 模块。我已经成功实现了延迟加载，因此只有在用户请求“/admin”时才能加载管理模块。

从 Angular 2 文档中，我看到我可以像这样指定一个“canLoad”保护：

  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AdminGuard]
  }

并在 AdminGuard 类中实现一个函数 canLoad，如下所示：

canLoad(route: Route): boolean {
  return this.authService.isAdmin();
}

（isAdmin() 可以调用后端 API，返回当前用户的角色或类似的东西）

但这真的会阻止任何非管理员加载 AdminModule 吗？除非我误解，所有这些代码都位于客户端上，那么有什么可以阻止客户端修改“canLoad”方法使其始终返回true？像这样：

canLoad(route: Route): boolean {
  return true;
}

因此允许客户端加载他们想要的任何模块。

显然，任何需要管理员身份的后端 API 调用都会受到保护，但似乎任何用户都可以查看管理员 UI，这对我来说有点奇怪。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： angular authentication angular2-routing

【解决方案1】：

这是一个很好的问题，我很好奇是否有人对此有详细的答案。所以我发现这个链接进行了非常棒的对话。

Angular 2 Reddit Article

一条真正让我印象深刻的评论是这条。

在 SPA 中讲，一般 html 模板和你的 js 文件会是开放给任何足够关心检查的人。您的 SPA 会说话仅以数据（读取：json）到您的服务器，然后模板将是在客户端填充此数据。所以你最关心的是保护此 API。会话、cookies、令牌，都意味着在这里仍然有效。我自己使用令牌进行身份验证和授权。 API 请求将包含服务器签名的令牌，然后验证并从中提取角色和凭据，然后使用确定用户是否有权提出该请求。失败的 check 将返回 401-unauthorized 给客户端。在角度方面，我们保存成功登录后我们收到的令牌，然后将其用于后续请求。我还解码凭证和角色，并使用它显示用户信息并授权路线。角度的路线守卫是通过 CanActivate 接口实现，可以链接多个的：{路径：'受保护'，CanActivate：[LoggedInGuard]}，{路径： 'supersecret', CanActivate: [LoggedInGuard,AdminGuard] } ...等但是客户端（阅读：角度）守卫最终是用户体验问题，而不是安全手段。一个知识渊博的黑客可以搞砸使用开发控制台的变量，或使用直接 api 完全绕过它称呼。几乎可以向用户展示发生了什么错误并导航其他地方等等。

【讨论】：

这并不是问题的真正答案。它确实链接到一个很好的对话。到目前为止，我在该主题上找到的信息无法确定具有此功能的明确原因或解决它。我在几分钟前发布了这个问题：stackoverflow.com/questions/47613907

【解决方案2】：

我认为这是我见过的关于这个问题的最佳答案——这部分的文档也很丑—— 他们从整个项目开始并制作所有功能模块，然后用其中一个制作延迟加载部分，然后他们制作 canLoad 或保护您的延迟加载路由，以及如何使用相同的保护服务与 canLoad & canActivate - 如果您尝试对非延迟加载的路由使用相同的保护 - ：
https://www.concretepage.com/angular/angular-canload-guard-example

【讨论】：