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

Question

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

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

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

让我们举个例子：

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

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

索引.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';

宾果游戏，组U3的用户现在拥有U1的权限，并且能够在A1点击时看到私人信息。好的，由于初始条件，他仍然无法看到那些尚未在页面上呈现的组件。但是，在这些检查后条件之后，他仍然可以访问可用的功能。

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

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

Answer 1

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

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

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

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

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