使用 JavaScript 管理 Web 应用程序权限策略

Question

我非常想知道通常使用什么策略来管理不同开发人员对单页 Web 应用程序不同部分的用户权限策略。

仅举一个例子：在 单页 Web 应用程序下，我的意思是 Web 应用程序只有一个 HTML（JSP、PHP 等）页面作为入口点，并构建了所有其他客户端 UI 组件/页面使用 JavaScript）。

是否有任何最佳实践、方法或框架可以让这件事变得更加简单明了？

举个例子：

• 有一个带有 2 个选项卡的单页 Web 应用程序：A 和 B
• 每个选项卡都有 3 个组件（网格、按钮等）：A1、A2、A3 和 B1、B2， B3
• 有 3 个用户组：U1、U2 和 U3
• U1 可以访问两个选项卡和所有组件
• U2 可以访问两个选项卡，但只能访问组件 A1 和 B1
• U3 只能访问选项卡 A 和此选项卡中的所有组件

表面上的一个解决方案是在页面加载时（或使用单独的 AJAX 请求）构建一个全局 JS 对象并将用户组存储在那里。然后在代码中使用条件来验证当前组并允许或限制特定功能。一个简化的示例如下所示：

index.html

<script type="text/javascript">
    window.onload = function() {                
        MyApplication = {
            userGroup : 'U3' // can be also U1 or U2. This value comes from server
        };
    }
</script>   

然后在代码中我们将进行如下检查：

if (MyApplication.userGroup == 'U1') {...}
if (MyApplication.userGroup == 'U1' || MyApplication.userGroup == 'U2') {...}
if (MyApplication.userGroup != 'U3') {...}

该示例可以扩展为根据用户组以不同方式处理事件的场景。 假设 A1 是按钮，A1OnClickHandler 是它的点击处理程序：

var A1OnClickHandler = function() {
    if (MyApplication.userGroup == 'U1') {
        console.log('A very private information'); 
    } else if (MyApplication.userGroup == 'U2') {
        console.log('Less private information'); 
    } else if (MyApplication.userGroup == 'U3') {
        console.log('Public information'); 
    }
}

我描述的方法的一个缺点是可能会在呈现页面后由用户动态更改 MyApplication.userGroup 的值。只需打开控制台并输入：

MyApplication.userGroup = 'U1';

Bingo，组 U3 的用户现在拥有 U1 的权限，将能够查看 A1 点击的私人信息。 好的，他仍然无法看到那些由于初始条件而没有在页面上呈现的组件。但在这些后检查条件之后，他仍然可以访问可用的功能。

老实说，我对无法在网络上找到与此问题相关的任何具体信息感到有些惊讶。我想念什么吗？ 如果有人可以分享自己解决此类问题的经验，那将是很有趣的。

更新：当然，所有不应该由组 U2 U3 的用户执行的操作都不会在服务器上执行，因为服务器上也有安全检查。例如，即使黑客能够在前端显示按钮或字段，该操作也不会在后端执行。但我正在寻找的是根本不给机会在前端做这种事情。

Answer 1

您不能将 JavaScript 用于与权限或安全相关的任何事情：用户只需打开浏览器控制台并编辑您的 JavaScript。所以这种方法是行不通的（好吧，除非你根本不在乎）。

正确的解决方案是在服务器上实现安全性，并且仅将那些组件发送到特定用户（您通过某种登录方式识别）可以根据存储在服务器上的权限实际查看/使用的浏览器。

如果一个组件包含敏感部分，那么你需要想出一种方法来拆分它并将不同的版本发送到浏览器，这取决于用户。

[编辑] 尝试找出一种方法将脚本拆分为更小的部分（组件）。 ZK Framework 的工作方式如下：您有一个 HTML 组件框架（组件 = JavaScript，HTML 模板 + CSS）加上一个 JavaScript 核心，它根据服务器准备的 JSON 配置加载组件并配置它们。

这样，您可以在 PHP 中构建 UI 结构，将其转换为 JSON，然后将其发送到将使用此“配置”呈现 UI 的客户端。这些组件将是可重用的，并且对于所有客户端都是相同的。根本不需要在客户端检查权限，因为客户端代码永远不需要知道。