javascript - 使用 TS 的 Angular2 中的安全性

Question

我想使用 Angular2 和 TS 构建一个网络应用程序。

我阅读了一些关于 Angular2 身份验证的教程，他们说我必须实现以下内容。

1. 索引组件(公共(public))
2. 登录组件(公共(public))
3. 我的私有(private)组件(私有(private))

所有这些组件都使用 Angular-Router 进行路由，并受到一些守卫的保护。

但我认为这些守卫并不是很安全。路由受到保护，但组件位于客户端 js 中的某个位置。一些“js-hacker”可以在没有权限的情况下访问私有(private)组件。

我的想法对吗？

我的解决方案是在身份验证请求期间请求私有(private)组件，只有在用户具有权限时才返回它。

但在这种情况下，我不得不将我的应用程序分为登录部分和私有(private)部分。 (好像是开销)

另一种解决方案是在每个请求中发送一个 token ，这样“js-hacker”就可以看到该组件，但看不到它的数据，因此它对他来说毫无用处。 (但是这个token是需要存储的)

请帮我决定在安全方面该走哪条路，或者建议我一个更好的(我更喜欢一个更好的……)。

谢谢。

Answer 1

您将使用 *ngIf 有条件地将您的 protected 组件附加到有效的身份验证状态。如果您将 *ngIf 绑定(bind)到的任何东西的计算结果为 false，它不仅会从 View 中隐藏它，还会从 DOM 中完全删除组件及其内部的所有内容。

如果他们知道自己在做什么，他们仍然可以查看组件的源代码，是的，但是正如您所猜测的那样，您希望将敏感数据保留在源代码之外，并且只从安全的地方获取它对于经过身份验证的用户。

你应该真的看看谷歌的Firebase . Firebase 可以比您自己更安全、更稳健地为您处理身份验证，并且您可以使用 Firebase 实时数据库存储敏感数据，并且仅在用户通过身份验证时将其发送到客户端。它难以置信简单，与 Angular 配合得很好(AngularFire2 是官方库，虽然它不是必需的)，并且它具有比数据库和身份验证更多的功能。相信我，您不会后悔的。