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

Question

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

Just for a case: under single-page web app I mean web application with only one HTML (JSP, PHP, whatever) page as entry point and all the other client UI components/pages built with JavaScript).

是否有任何最佳实践、方法或框架可以使这件事变得更加简单和直接？

举个例子:

• 有一个单页 Web 应用程序，有 2 个选项卡:A 和 B
• 每个选项卡都有 3 个组件(网格、按钮等):A1、A2、A3 和 B1、B2、 B3
• 有 3 个用户组:U1、U2 和 U3
• U1 可以访问这两个选项卡和所有组件
• U2 可以访问这两个选项卡，但只能访问组件 A1 和 B1
• U3 只能访问选项卡 A 以及该选项卡内的所有组件

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

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 点击时看到私有(private)信息。 好吧，他仍然看不到那些因为初始条件而没有在页面上渲染的组件。但在这些后检查条件之后，他仍然能够访问可用的功能。

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

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

Answer 1

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

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

如果一个组件包含敏感部分，那么您需要找到一种方法来拆分它并根据用户的不同向浏览器发送不同的版本。

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

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