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

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

在服务器端呈现的旧方法中，我将在后端对用户登录进行身份验证，并呈现适合登录用户的整个html页面

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

就我现在的理解而言，要在前端框架中登录用户，我需要在localStorage中保存一个变量，指示他已通过身份验证（甚至可能是管理员的角色），这样在构建页面时，我只需询问该变量是否在localStorage中，就可以知道用户是否已登录，如果他的角色是管理员，如果两者都是真的，我会向他展示所有的管理员功能

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

这就引出了我的问题- 在当今的前端世界中，有没有更好的方法来执行登录身份验证？

---

或者我一定要让黑客看到所有的管理功能，并且只能保护它们不被未经授权的用户在后端使用？

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

将向服务器单独请求受保护的数据，并且仅当用户具有所需的权限时才会返回安全内容。然后使用Ajax将其插入页面中

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

请查看中列出的一些身份验证策略。有许多库也有相同的功能，但是passport有一个很好的选择供您参考

---

如果你真的想阻止一个未经授权的用户，即使看到管理选项，你也不应该把html作为主应用程序的一部分。需要时，应单独请求返回该HTML。单击“管理”按钮将请求管理页面。只有当用户具有所需的权限（与传统的多页应用程序完全相同）时，服务器才会返回相关视图。区别在于客户机应用程序如何处理。现在我们将把它插入当前页面，而不是刷新整个页面。

您提到的变量通常是JWT令牌。在每次请求时发送到服务器的令牌（可以使用Angular拦截器执行此操作）并在服务器上进行验证。您可以在此处阅读更多关于它们的信息：

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

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

你可以把你的前端分成两个代码库，并对管理员进行更严格的访问，但从理论上讲，管理员可以保存你的前端资产并将其泄露给黑客。因此，为了不提供更多的保护，您需要2个代码库

---

总之，只需保护后端。

您不想使用localStorage，但可能需要使用安全cookie，因为如果您将管理员角色存储在localStorage中，并且用户在之后立即被撤销了管理员访问权限，则用户仍然可以访问仅管理员区域，因为localStorage持久化将删除“在每个请求中发送用户名和密码”。这太糟糕了。我已经更新了答案。这是一件可怕的事情（尤其是在本地存储！），但这是让你了解我们试图实现的目标的最简单方法。