Question

我正在开发一个应用程序，我有一个用户区和一个管理区。我把它们分成了单独的Angular 2模块。我已经成功实现了延迟加载，因此只有在＆＃39; / admin＆＃39;是用户请求的。

从Angular 2文档中，我看到我可以指定一个＆＃34; canLoad＆＃34;像这样的守卫：

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

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

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

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

但这是否真的会阻止任何非管理员加载AdminModule？除非我误解，所有这些代码都位于客户端，所以有什么可以阻止客户端修改＆＃34; canLoad＆＃34;方法，以便它总是返回true？像这样：

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

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

显然，任何需要管理员状态的后端API调用都会受到保护，但似乎任何用户都可以查看管理界面，这对我来说似乎有点奇怪。有人可以为我清楚这一点吗？

Answer 1

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

Angular 2 Reddit Article

真正引起我注意的一个评论就是这个。

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

Answer 2

我认为这是我在这个问题上看到的最好的答案 - 文档在这部分也是丑陋的 - 他们从一个完整的项目开始，制作所有的功能模块，然后用其中一个制作延迟加载部件，然后他们制作canLoad或保护你的延迟加载路线，以及如何使用canLoad＆amp; amp ; canActivate - 如果你试图对非延迟加载的路线使用相同的守卫 - ：
https://www.concretepage.com/angular/angular-canload-guard-example

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

2 个答案: