用户和管理界面应该在代码中分开（单独的类）还是应该通过 css 隐藏不需要的功能答案

【问题标题】：Should user and admin interfaces be separated in the code (separate classes) or should the not needed functionnalities be hidden through css用户和管理界面应该在代码中分开（单独的类）还是应该通过 css 隐藏不需要的功能
【发布时间】：2019-07-26 08:24:03
【问题描述】：

好的，所以我对 Web 开发还很陌生，但是我已经掌握了 js/html/css 的窍门，并且我正在开发一个游戏/网站。我基本上完成了我的工作，但我不确定我现在应该做什么

我想要做的是使用与我相同的管理界面，但对用户/播放器有一些限制。例如，假设“管理员”可以向网站添加内容并移动它们等，而玩家只能查看和使用它们，而不能编辑它们或向视图添加新项目。

另外，我对许多 html 页面使用相同的界面，这就是为什么我觉得我必须问这个。

我应该克隆当前的类并删除一些不需要的东西，还是应该只用 css 和 html 隐藏项目？

PS：网站很大，课程很多，所以我犹豫了。

我不知道是否应该提供任何代码，但我的问题的一个示例是：

克隆类 - 管理员类“查看器”和播放器类“restrictedViewer”

隐藏项目 - 只需使用 "display: none"

【问题讨论】：

欢迎来到 Stack Overflow _ 请花一两分钟时间访问帮助中心，了解应该如何提问_ 这样您就可以充分利用网站，并希望您能得到一些答案正在寻找 >>> stackoverflow.com/help
@maik 我已经浏览了帮助页面，请您解释一下我的问题出了什么问题

标签： javascript html css conceptual

【解决方案1】：

在开发人员的工具中覆盖一些类，在没有适当权限的情况下访问管理功能真的很容易。如果您担心安全问题，您绝对不应该使用简单的“显示：无”来隐藏管理面板。

我这样做的方法是拥有一个特定的管理页面，只有在您拥有正确的凭据时才能访问该页面。但是，这需要您拥有适当的授权系统。

我知道，如果您只想为管理员提供一些额外的按钮，此解决方案并不是很有用。为了防止用户点击他们不应该点击的东西（因为他们在开发工具中搞砸了），您还应该找到一种在点击按钮时检查凭据的方法。在这种情况下，即使用户能够以某种方式显示按钮并单击它，他们也不能真正使用它。

另一种选择是让按钮由 JS 生成，并在那段代码中检查凭据以生成与用户角色匹配的按钮。这对于“破解”有点棘手，因为您不能简单地在开发工具中切换类或 CSS 属性。当然，无论如何，您仍然应该检查按钮处理程序中的凭据。

请记住，隐藏某些 HTML 元素并不是保护它们的好方法。您需要在每个步骤中验证用户凭据，包括处理。

【讨论】：

我想我理解你的解决方案，所以我绝对不应该只显示：如果安全是一个问题，我的元素将是最终的。我最终应该使用适当的授权系统，但还没有，老实说，我真的不知道怎么做。所以现在，只需复制管理类并基本上划掉（删除）我不想要的所有内容？无论如何，我的大部分 html 都是由 JS 生成的，如果可能的话，html 文件只包含基本轮廓。关于你的最后一点，你能详细说明一下吗？我对安全性了解不多，每一步都进行验证？非常感谢！
对于“每一步”，我的意思是您应该验证用户是否在不止一个地方拥有正确的凭据。如果按钮有处理程序，请在执行任何其他操作之前验证用户是该处理程序中的管理员。如果处理程序调用了执行重要操作（例如保存某些内容）的方法，则应检查用户是否是该方法的管理员。如果处理程序使用后端调用在数据库中写入某些内容（我假设您没有，但仍然如此），您应该检查用户是否是该后端调用中的管理员。
是的，如果安全是一个因素，您应该实施适当的授权系统。幸运的是，有很多库可以为您处理更复杂的东西。你是在使用纯 JS，还是在使用 Angular/React/Vue.js 之类的框架？如果是这样，找到一个插件来处理安全性会更容易。
我了解@Stybar，因此应经常在网站上进行验证。我将有一个数据库来存储我的所有资源（照片、图标等），但现在我在本地做所有事情（因为这就是项目最初的启动方式）。安全性很快就会成为一个因素，我将在这里与其他成员讨论这个问题，因为已经实施了一个授权系统。作为记录，我只使用 JQuery，其他库是 3D 的东西，比如 three.js
您的回答和@slebetman 的回答都让我对情况有了更深入的了解，并帮助我实现了我想要的。我希望我能选择 2 个正确答案，但由于我不能，我会选择 Stybar's，因为我相信未来的观众会更喜欢更一般的观点。谢谢你们两位的回复和时间。

【解决方案2】：

对于 UI，任何一种方法都可以。重要的是管理员可以访问一些非管理员无法看到的页面。您为实现这一目标而开发的任何机制都是有效的。

现在，您还没有询问过 Web 开发的另一个非常重要的部分：授权。 对于授权，CSS 是不够的。您必须假设用户已经并且知道如何使用 postman 或 curl 或 Chrome/Edge/Safari/Firefox 开发者控制台。这是一个有效的假设，因为这些是 Web 开发中的常用工具，并且很多（不是很大，但仍然很多）用户可能是 Web 开发人员。

您必须让非管理员无法调用只有管理员才能访问的函数。

有几种机制可以做到这一点，大多数被认为是最佳实践的技术不需要您复制类。它们通常涉及用户角色或权限机制。

最简单的实现是一个函数，它检查用户是否有权访问该页面，并且您在控制器中首先调用该函数。根据您的框架，您还可以使用中间件来执行此操作，因为用户角色/权限/授权是一个横切关注点。一些语言可以使用注解/模板/宏来标记具有权限的页面。

无论您实施何种机制，都必须在服务器上完成，因为用户始终可以这样做：

curl http://your.website/some/admin/endpoint/to/restart/server

.. 访问页面（或直接在浏览器中输入）。有时您需要在前端实现一些花哨的验证或隐藏以获得更流畅的 UI 体验。没关系。但这并不意味着您不需要在后端也实现适当的授权机制。

【讨论】：

感谢您的详尽回答。据我了解，在这种情况下，我应该向我的类添加属性，以始终检查用户是否确实是管理员。在这种情况下，另一个“init”函数被调用。在这个 init 函数中，虽然我需要更改或复制一些调用的原始类，因为我的函数不会分离所有功能。我很快需要在我的工作场所与正确的人一起更多地研究安全性，但我现在知道如何准备要实施的一切。谢谢
基本上是的。这取决于您如何构建应用程序。您可以使用 CSS 和权限的组合 - 使用 CSS 显示/隐藏特殊菜单项/链接，然后在目标链接中使用权限机制来防止未经授权的访问。如果您有一个混合页面，其中包含非管理员无法访问的某些数据，那么您可以使用服务器端模板来检查权限
但是 Web 应用程序的结构类型非常广泛和多样——即使我们只是坚持 MVC 设计模式。因此，确切的解决方案将取决于您使用的是什么
我明白了，我想我将不得不更深入地考虑用户授权并与正确的人讨论这个问题，但谢谢。我知道有很多方法可以在网络上做事，业余爱好者并不总是很容易选择正确的解决方案
您的回答和@Stybar 的回答都让我对情况有了更深入的了解，并帮助我达到了我想要的目标。我希望我能选择 2 个正确答案，但由于我不能，我会选择 Stybar's，因为我相信未来的观众会更喜欢更一般的观点。谢谢你们两位的回复和时间。