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

Question

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

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

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

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

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

这让我想到了我的问题 - 有没有更好的方法在今天的前端世界中执行登录身份验证？ 或者我是否必须让黑客看到所有的管理功能，并且只能保护他们不被未经授权的用户仅在后端使用？

Answer 1

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

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

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

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

如果你真的想要阻止未经授权的用户甚至看到管理员选项，你不应该为主应用程序的一部分渲染html。应该在需要时单独请求返回该HTML。点击＆＃34; admin＆＃34;按钮会发出管理页面的请求。如果用户具有所需权限，服务器将仅返回相关视图（与传统多页面应用程序完全相同）。不同之处在于客户端应用程序如何处理它。现在我们将它插入当前页面而不是刷新整个内容。

Answer 2

您提到的变量通常是JWT令牌。您在每个请求上发送到服务器的令牌（您可以使用Angular拦截器执行此操作）并在服务器上进行验证。您可以在此处详细了解它们：

对于用户信息（名称，角色等），我将其保留在内存中而不是本地存储中。

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

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

底线，只是保护后端。