web-RABC-Permissions-sdk实战教程：3个案例掌握按钮级权限控制

web-RABC-Permissions-sdk实战教程：3个案例掌握按钮级权限控制

【免费下载链接】web-RABC-Permissions-sdk后台管理系统RABC通用权限控制规范与规范代码实施js-SDK，包含 节点/按钮/路由 等控制 ，支持hidden项目地址: https://gitcode.com/gh_mirrors/we/web-RABC-Permissions-sdk

web-RABC-Permissions-sdk是一款后台管理系统RABC通用权限控制规范与规范代码实施js-SDK，包含节点/按钮/路由等控制，支持hidden、disabled、删除或自定义function处理，通过配置实现RABC的权限控制。

快速入门：安装与基础配置 🚀

一键安装步骤

通过npm即可快速安装web-RABC-Permissions-sdk：

npm i web-rabc-permissions-sdk -S

核心概念解析

该SDK基于RABC设计思想，通过配置用户可拥有和不可拥有的权限节点实现控制。核心设计思路包括：

• 初始状态下所有按钮、容器、节点均为可见状态
• 通常只需配置用户不可使用的节点权限
• 支持通过多角色、特殊权限补充实现复杂权限需求
• 权限控制粒度精确到按钮级，支持hidden、disabled等多种控制方式

案例1：基础按钮隐藏控制 🔍

实现步骤

1. 创建权限配置对象：使用getNewPermissionSimpleDTO()创建权限节点配置
2. 设置不可见权限：配置noPermiss数组指定需要隐藏的按钮
3. 初始化SDK：传入配置参数并启动权限控制

代码示例

import { webRabcPermisson, getNewPermissionSimpleDTO, PLAN_ENUM, webRabcPermissionSdkOptions } from 'web-rabc-permissions-sdk'; // 创建不可见权限配置 const noPermissArr = [ { describe: "隐藏编辑按钮", eleIdOrClass: "#editBtn", // 按钮ID选择器 resultType: "hidden", // 控制方式：隐藏 routerPath: "/user/list" // 应用路由 } ]; // 配置SDK选项 webRabcPermissionSdkOptions.noPermiss = noPermissArr; webRabcPermissionSdkOptions.plan = PLAN_ENUM.OB_SERVER; // 使用MutationObserver方案 webRabcPermissionSdkOptions.libraryName = 'vue'; // 指定框架为Vue // 初始化并启动权限控制 const webRabc = new webRabcPermisson(webRabcPermissionSdkOptions); webRabc.start({ millisec: 500, obServerConfig: { childList: true, subtree: true }, obElem: 'app' // 监控的根节点ID });

实现原理

SDK通过MutationObserver监控DOM变化，当匹配到路由/user/list时，自动查找ID为editBtn的元素并设置hidden样式。这种方式无需修改业务代码，通过配置即可实现权限控制。

案例2：按钮禁用与自定义处理 ⚙️

场景需求

某些场景下需要将按钮设置为禁用状态而非完全隐藏，或者执行自定义逻辑（如显示权限不足提示）。

实现步骤

1. 配置特殊权限节点：使用specialPermiss数组配置特殊处理的按钮
2. 设置自定义处理函数：通过callBackFunc实现禁用逻辑或其他自定义操作
3. 获取框架实例：配置vueTemplateRoot获取Vue实例，实现更灵活的控制

代码示例

// 创建特殊权限配置 const specialPermissArr = [ { describe: "禁用删除按钮并显示提示", eleIdOrClass: ".deleteBtn", // 按钮类选择器 routerPath: "/user/list", callBackFunc: function(tools) { // 获取所有删除按钮 const buttons = tools.$queryAll(this.eleIdOrClass); buttons.forEach(btn => { btn.disabled = true; btn.title = "您没有删除权限"; // 添加点击事件提示 btn.addEventListener('click', () => { this.$message.warning("权限不足，无法执行删除操作"); }); }); }, vueTemplateRoot: "user-list" // Vue组件的template ID } ]; // 配置SDK选项 webRabcPermissionSdkOptions.specialPermiss = specialPermissArr; // ...其他基础配置 // 启动权限控制 const webRabc = new webRabcPermisson(webRabcPermissionSdkOptions); webRabc.start({/* 配置参数 */});

工具函数说明

callBackFunc中提供的tools对象包含常用DOM操作方法：

• $getById(el)：通过ID获取元素
• $query(el)：通过选择器获取单个元素
• $queryAll(el)：通过选择器获取多个元素
• $getTagName(el)：通过标签名获取元素

案例3：多角色权限合并处理 👥

场景需求

当用户同时拥有多个角色时，需要合并不同角色的权限设置，实现更复杂的权限控制逻辑。

实现步骤

1. 获取用户角色权限：从后端接口获取用户拥有的所有角色权限
2. 合并权限配置：将不同角色的权限配置合并到havePermiss和noPermiss数组
3. 设置执行顺序：通过actionOrder配置权限执行优先级

代码示例

// 从后端获取用户角色权限 ajax('get', '/api/user/permissions', { userId: 123 }).then(res => { const { havePermissions, noPermissions } = res.data; // 转换为SDK所需的权限格式 const havePermissArr = havePermissions.map(perm => { const dto = new getNewPermissionSimpleDTO(); dto.describe = perm.name; dto.eleIdOrClass = perm.selector; dto.resultType = "show"; // 显式指定显示 dto.routerPath = perm.route; return dto; }); const noPermissArr = noPermissions.map(perm => { const dto = new getNewPermissionSimpleDTO(); dto.describe = perm.name; dto.eleIdOrClass = perm.selector; dto.resultType = "hidden"; dto.routerPath = perm.route; return dto; }); // 配置SDK选项 webRabcPermissionSdkOptions.havePermiss = havePermissArr; webRabcPermissionSdkOptions.noPermiss = noPermissArr; webRabcPermissionSdkOptions.actionOrder = ['doNoPermiss', 'doHavePermiss']; // 执行顺序：先处理不可见权限，再处理可见权限 // 初始化并启动权限控制 const webRabc = new webRabcPermisson(webRabcPermissionSdkOptions); webRabc.start({/* 配置参数 */}); });

权限合并策略

SDK内部会自动对havePermiss和noPermiss进行diff去重，规则如下：

• 当同一路由下的同一元素同时出现在两个数组中时，noPermiss优先级高于havePermiss
• 不同路由或不同元素的权限配置会分别处理
• specialPermiss特殊权限不受上述规则影响，总是最后执行

高级配置与最佳实践 💡

执行计划选择

SDK提供两种执行计划，可根据项目需求选择：

性能优化建议

1. 精确设置路由匹配：避免使用/作为routerPath，减少不必要的DOM检查
2. 优先使用ID选择器：eleIdOrClass尽量使用ID选择器（#id），提高查询效率
3. 合理设置节流时间：根据项目复杂度调整millisec和delay参数，平衡响应速度和性能
4. 避免过度权限配置：只配置需要控制的元素，减少DOM操作次数

调试与监控

通过getSdkInfo()方法可获取SDK执行状态，方便调试：

console.dir(webRabc.getSdkInfo());

总结

web-RABC-Permissions-sdk提供了灵活且强大的按钮级权限控制方案，通过本文介绍的3个案例，你可以快速掌握从基础隐藏控制到复杂多角色权限合并的实现方法。该SDK采用配置化方式，无需侵入业务代码，即可实现精细的权限管理，是后台管理系统权限控制的理想选择。

要获取更多示例和完整使用说明，可以参考项目中的README.md文档，或通过以下命令获取完整项目：

git clone https://gitcode.com/gh_mirrors/we/web-RABC-Permissions-sdk

【免费下载链接】web-RABC-Permissions-sdk后台管理系统RABC通用权限控制规范与规范代码实施js-SDK，包含 节点/按钮/路由 等控制 ，支持hidden项目地址: https://gitcode.com/gh_mirrors/we/web-RABC-Permissions-sdk