CanActivate 如何在 Angular2 中工作？答案

【问题标题】：How does CanActivate work in Angular2?CanActivate 如何在 Angular2 中工作？
【发布时间】：2017-04-07 21:55:24
【问题描述】：

TL;DR CanActivate 是如何工作的？

加长版 这是我第一次看到客户端访问控制的实现。

到目前为止，在我使用的所有身份验证系统中（例如 PHP 或其他服务器端编程语言），总是有一个函数可以检查用户是否已经登录，如果该函数返回 true，则服务器可以传递页面，否则用户将被重定向到登录页面。

在这种情况下客户端无法访问服务器代码，它只能发出请求并等待服务器组成页面，然后渲染它。

相反，Angular 的工作方式不同。它是一个使用 JavaScript 的客户端框架，每个人都可以看到它的代码。私人页面没有安全地放置在服务器内，唯一的服务器任务是交付 SPA，但它不能接受进一步的请求。

尽管如此，该框架实现了 CanActivate 的功能，并且运行良好。所以我想知道是什么禁止我注入一些 JavaScript 代码并访问私有页面，即使我没有权限，或者更一般地说这个系统是如何工作的。在互联网上我没有找到足够的信息，我没有足够的技能来理解源代码。你能帮我澄清一下我的想法吗？

我可以问标题中的问题，但我更愿意将我知道的一切都告诉你，所以如果有什么不对的地方，你可以纠正我。谢谢你

【问题讨论】：

您仍然需要服务器端身份验证（因为恶意用户无论如何都可以访问任何内容）。路由器提供的保护方法对您来说有点方便。您应该交付没有硬编码秘密数据的空模板，并为授权用户填充它们。 CanActivate 无需对每个组件/页面进行权限检查，而是允许您将其保存在一个地方并重用它。查看docs 了解更多信息和示例

【解决方案1】：

CanActivate 不能防止愚蠢和/或不安全的编程

TL;DR 即使在 SPA 中，敏感数据也受到服务器的保护，并且只有在请求中传递了正确的身份验证令牌时才会返回。像 CanActivate 这样的包装器或装饰器，只是为了方便管理视图，没有真实数据的视图只是空壳！

加长版

您的问题不是 CanActivate 特定的，而是关于客户端身份验证 IMO 的概念。您正确地假设如果任何敏感数据已被推送到 SPA 且不应该没有适当的身份验证，那么无论是否有客户端身份验证，都可以访问它。 但这不是客户端身份验证的重点。

CanActivate 装饰器或任何其他 JavaScript/Mobile Token 身份验证系统的工作方式是，它向服务器发出身份验证请求，服务器返回身份验证令牌。

现在 SPA 在其后续请求中应该将该身份验证令牌传递回服务器，如果身份验证令牌有效，服务器将在这些请求中发回真实数据。

SPA 现在获取这些数据并将其编译为用户视图。因此，虽然 SPA 在概念上是一个完全在浏览器中的应用程序，但它应该（并且在正常情况下确实如此）依赖于来自受身份验证保护的服务器的敏感数据。

对于来自更传统的基于会话的身份验证系统的人来说，这个概念应该没有太大的不同。在会话的情况下，身份验证 cookie 与后续请求一起发送，在 SAP 的情况下，令牌被发回。在身份验证方面，这是唯一的区别。

对于返回的数据，对于 SPA，服务器通常只返回 data，而对于经典的服务器端应用程序，服务器编译 view + data 并返回它。

希望这有意义并有所帮助！

【讨论】：