前端框架世界中的身份验证答案

【问题标题】：Authentication in the World of Front-End Frameworks前端框架世界中的身份验证
【发布时间】：2017-08-25 14:36:33
【问题描述】：

我的问题是关于当今前端世界的登录：

在服务器端呈现的旧方式中 - 我将在后端验证用户登录并呈现适合登录用户的整个 html 页面。

但现在有了前端框架 - 我在用户第一次进入网站时为他提供所有可能的页面，然后在他的浏览器中为他呈现正确的页面。

据我现在所理解的 - 要在前端框架中登录用户，我需要在 localStorage 中保存一个变量，表明他已通过身份验证（甚至可能是他的角色，如果是管理员），并且当我正在构建页面我只需要询问此变量是否在 localStorage 中以了解用户是否已登录，以及他的角色是否为管理员，如果两者都是真的，我会向他展示所有管理员功能

然而，这意味着如果我是一名黑客 - 我需要做的就是手动将此变量添加到我的 localStorage，然后我将看到整个管理功能。

这让我想到了我的问题 - 在当今的前端世界中是否有更好的方法来执行登录身份验证？还是我一定要让黑客看到所有的管理功能，并且只能保护它们不被未经授权的用户在后端使用？

【问题讨论】：

您不想使用 localStorage，但可能希望使用安全的 cookie，因为如果您将 admin 的角色存储在 localStorage 中并且用户随后被撤销管理员访问权限，用户仍然可以访问 admin -only 区域，因为 localStorage 仍然存在

标签： angular authentication frontend

【解决方案1】：

虽然您可以将特定于经过身份验证的用户的页面作为单页应用程序的一部分提供，但您不会提供数据。因此，用户可能会入侵网站以查看仅限管理员的页面并获取布局，但内容会丢失。

将向服务器发出单独请求以获取受保护的数据，并且只有在用户具有所需权限时才会返回安全内容。然后将其插入页面，例如使用 Ajax。

服务器有很多方法可以检查客户端是否经过身份验证。最简单的方法是在每个请求中传递用户名和密码。您提到的本地存储中的变量可以存储用户名和密码，以便每个 HTTP 请求都可以引用它。实际上，您不会这样做，因为它不是很安全。您更有可能发送某种令牌，该令牌在登录时由服务器返回，并且已经过哈希和/或加密。如果用户要修改它，服务器会知道并使其无效，并拒绝发送请求的内容。

查看Passport 中列出的一些身份验证策略。有许多图书馆都这样做，但护照有一个很好的选择供您参考。

如果您真的想阻止未经授权的用户甚至看到管理选项，您不应该将其呈现为主应用程序的一部分的 html。需要时应发出单独的请求以返回该 HTML。单击“管理”按钮将请求管理页面。如果用户具有所需的权限（就像在传统的多页面应用程序中一样），服务器只会返回相关视图。不同之处在于客户端应用程序如何处理它。现在我们将它插入到当前页面而不是刷新整个页面。

【讨论】：

我会删除“在每个请求中发送用户名和密码”。这太恶心了。
我已经更新了答案。这是一件可怕的事情（尤其是在本地存储它！），但这是了解我们正在努力实现的目标的最简单方法。

【解决方案2】：

您提到的变量通常是 JWT 令牌。您在每个请求上发送到服务器的令牌（您可以使用 Angular 拦截器来执行此操作）并在服务器上进行验证。你可以在这里阅读更多关于它们的信息：https://jwt.io/introduction/

至于用户信息（姓名、角色等），我会将其保存在内存中而不是本地存储中。

至于您的管理部分问题，是的，您总是假设黑客可以看到您的所有前端。但是由于您在服务器端验证实际操作，那么他所能做的就是查看它。

您可以将前端拆分为 2 个代码库，并对管理员进行更严格的访问，但管理员理论上可以保存您的前端资产并将其泄露给黑客。所以你得到了 2 个代码库的所有麻烦，没有更多的保护。

底线，只是保护后端。

【讨论】：