安全地保护延迟加载的模块(Angular 2)

Question

我正在开发一个应用程序,我有一个用户区和一个管理区.我把它们分成了单独的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,这对我来说似乎有点奇怪.有人可以为我清楚这一点吗？

Answer 1

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

Angular 2 Reddit文章

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

在SPA中,一般来说,html模板和你的js文件都将公开,供任何关心的人查看.您的SPA将仅在数据中与您的服务器通信(阅读:json),然后在客户端使用此数据填充模板.所以你主要关注的是保护这个API.会话,cookie,令牌,都是在这里仍然有效的手段.我自己使用令牌进行身份验证和授权.API请求将包含服务器签名的令牌,然后对其进行验证并从中提取角色和凭据,然后用于确定用户是否有权发出该请求.检查失败将向客户端返回401未授权.在角度方面,我们保存成功登录后收到的令牌,然后将其用于后续请求.我还解码凭证和角色,并用它显示用户信息和授权路线.通过CanActivate接口实现角度保护,通过CanActivate接口,您可以链接多个:{Path:'protected',CanActivate:[LoggedInGuard]},{Path:'supersecret',CanActivate:[LoggedInGuard,AdminGuard]} ...等但客户端(读取:角度)警卫最终是UX问题,而不是安全手段.知识渊博的黑客可以使用开发控制台搞乱变量,或者通过直接的api调用完全绕过变量.它几乎向用户显示发生了什么错误并导航到其他地方等.