前端框架领域的身份验证

Question

我的问题是关于今天\xe2\x80\x99s前端世界的登录：

\n\n

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

\n\n

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

\n\n

据我现在的理解 - 要在前端框架中登录用户，我需要在 localStorage 中保存一个变量，表明他已通过身份验证（甚至可能是他在管理员情况下的角色），这样当 i\xe2 时\x80\x99m 构建页面我只需要询问这个变量是否在 localStorage 中即可知道用户是否已登录，以及他的角色是否是管理员，如果两者都为真，我向他展示所有管理功能

\n\n

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

\n\n

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

\n

Answer 1

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

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

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

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

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