web-rabc-permissions-sdk
v1.1.7
Published
后台管理系统RABC通用权限控制规范与规范代码实施js-SDK，包含 节点/按钮/路由 等控制 ，支持hidden,disabled，删除，或则自定义function处理。 通过配置实现RABC的权限控制
Downloads
39
Maintainers
liyuecReadme
web-RABC-Permissions-sdk
目录
npm install⬆
npm i web-rabc-permissions-sdk -S基本使用与设计思路⬆
设计思路：
//基本使用代码如下
import {webRabcPermisson,getNewPermissionSimpleDTO,PLAN_ENUM,webRabcPermissionSdkOptions}
from 'web-rabc-permissions-sdk';
/*
webRabcPermissionSdkOptions ：基本配置
PLAN_ENUM ：执行计划（程序会自动做降级处理)
getNewPermissionSimpleDTO ：每个路由下可能存在的权限
webRabcPermisson ：实例类
*/
let _havePermissArr = [],
_noPermissArr = [],
_specialArr = [];
/*
假设请求一定成功
一般情况下，只需要配置用户或则对应角色不可拥有的节点
*/
ajax('get',url,{...userInfo}).then(res=>{
let {result} = res;
//角色 拥有的权限节点
_havePermissArr = result.map(i=>{
//得到实体构建节点对象
let _permissDTO = new getNewPermissionSimpleDTO();
//该节点的描述，方便debug理解，可空
_permissDTO.describe = `该节点的描述，方便debug理解，可空`;
//该节点ID或则className 其中id为 #id;className为 .className
_permissDTO.eleIdOrClass = `#id`
//hidden | removeNode 默认hidden，因为removeNode会直接导致DOM结构变更，可能造成副作用，本期暂未实现
_permissDTO.resultType = 'hidden'
//具体路由地址，程序执行会根据路由地址匹配，减少执行次数
_permissDTO.routerPath = '/c/vuepage1'
return _permissDTO
})
//角色 不可拥有节点
_noPermissArr= result.map(i=>{
//得到实体构建节点对象
let _permissDTO = new getNewPermissionSimpleDTO();
//该节点的描述，方便debug理解，可空
_permissDTO.describe = `该节点的描述，方便debug理解，可空`;
//该节点ID或则className 其中id为 #id;className为 .className
_permissDTO.eleIdOrClass = `.className`
//hidden | removeNode 默认hidden，因为removeNode会直接导致DOM结构变更，可能造成副作用，本期暂未实现
_permissDTO.resultType = 'hidden'
//具体路由地址，程序执行会根据路由地址匹配，减少执行次数
_permissDTO.routerPath = '/c/vuepage1'
return _permissDTO
})
//角色 不可拥有节点
_specialArr= result.map(i=>{
//得到实体构建节点对象
let _permissDTO = new getNewPermissionSimpleDTO();
//该节点的描述，方便debug理解，可空
_permissDTO.describe = `该节点的描述，方便debug理解，可空`;
//该节点ID或则className 其中id为 #id;className为 .className
_permissDTO.eleIdOrClass = `.className`
//hidden | removeNode 默认hidden，因为removeNode会直接导致DOM结构变更，可能造成副作用，本期暂未实现
_permissDTO.resultType = 'hidden'
//具体路由地址，程序执行会根据路由地址匹配，减少执行次数
_permissDTO.routerPath = '/c/vuepage1'
return _permissDTO
})
webRabcPermissionSdkOptions.havePermiss = _havePermissArr;
webRabcPermissionSdkOptions.noPermiss = _noPermissArr;
webRabcPermissionSdkOptions.specialPermiss = _specialArr;
//执行计划 MutationObserver or setTimeout
webRabcPermissionSdkOptions.plan = PLAN_ENUM.OB_SERVER;
//对象框架 目前支持获取vue this, react也适用，但是不能获取到某个react组件下的this
webRabcPermissionSdkOptions.libraryName = 'vue'
let _webRabc = new webRabcPermisson(webRabcPermissionSdkOptions);
//启动权限
_webRabc.start({
//执行时间
millisec:500,
//obServer的执行节点设置
obServerConfig:{
attributes:false,
childList:true,
subtree:true,
characterData:false
},
//节流时间
delay:500,
//必须指定一个observer的容器节点，必须是ID
obElem:'app'
});
})
//debug时 获取执行情况
console.dir(_webRabc.getSdkInfo())
具体使用的DEMO地址⬆
web-RABC-Permissions-sdk 使用DEMO地址
具体配置含义⬆
PLAN_ENUM（可选）⬆
| 属性名 | 描述 | | ---------------- | ----------- | | SET_TIMEOUT | 通过setTimout实现执行方案 | | OB_SERVER | 通过MutationObserver实现执行方案 |
ACTION_ORDER（可选）⬆
| 属性名 | 描述 | | ---------------- | ----------- | | doNoPermiss | 不可拥有 权限 | | doHavePermiss | 可拥有 权限 | | doSpecialPermiss | 特殊权限 |
permissionSimpleDTO（必选）⬆
| 属性名 |是否必选| 描述 | | ---------------- | ----------- | ----------- | | routerPath |必选| 当前路由关键字（react,vue,传统web应用), 也可以直接取"/"，表示所有路由匹配| | eleIdOrClass |必选| 当前节点的ID或则ClassName，若是ID，则赋值"#具体ID",若是className，则赋值".具体ClassName"，最终通过querySelector和querySelectorAll获取，建议使用ID | | resultType |可选| 默认hidden | | showElemType |可选|用户自定义display内容，设置后该节点将变为 display:用户内容!important;若赋值，则不会执行resultType逻辑| |describe |可选|节点描述，方便DEBUG查看具体含义，理论上为String类型最大值| |callBackFunc |可选|当前节点执行方法;默认不执行，若赋值，则只会执行当前callBackFunc(必须是一个function,箭头函数，class均会被throw)，目前提供具体的4个方法，见如下代码，下个版本计划加入sandBox进行安全信任配置| |vueTemplateRoot |可选|当前节点可使用的vue对象，默认为""。若当前节点为正确的vue template ID，则可以在callBackFunc下得到当前vue 的this,通过this调用，若失败或则为""，this则为window|
//callBackFunc示例
callBackFunc = function(tools){
tools.$queryAll('.router_main i').forEach(i =>{
//你的业务逻辑
}
})
/*
其中tools包含
tools = {
$getById(el){
return document.getElementById(el)
},
$query(el){
return document.querySelector(el)
},
$queryAll(el){
return document.querySelectorAll(el)
},
$getTagName(el){
return document.getElementsByTagName(el)
}
}
若libraryName = 'vue' 且 节点vueTemplateRoot 指定为正确的vue template ，则callBackfunc下的this为当前vue对象，可对当前vue对象做任何操作
*/
webRabcPermissionSdkOptions（必选）⬆
| 属性名 |是否必选| 描述 | | ---------------- | ----------- | ----------- | | permission |可选| 为微前端保留的实体结构| | libraryName |可选| 本次执行web应用中的基本框架，传入vue 或则 react，其中传入vue ，callBackFunc下获取library下对应的this对象有影响，不传入this默认指向window| | plan |必选| 执行方案，参见 PLAN_ENUM | | havePermiss |可选| 当前角色下必定显示的节点与路由集合(array)| | noPermiss |可选| 当前角色下 需要隐藏或则删除的节点与路由集合(array)| | specialPermiss |可选| 当前角色下 特殊的 节点与路由集合(array)| | actionOrder |可选| havePermiss、noPermiss、specialPermiss执行顺序，默认当前不可拥有权限 ---> 当前必须拥有权限 ---> 当前特定权限|
启动权限⬆
let _webRabc = new webRabcPermisson(webRabcPermissionSdkOptions);
_webRabc.start({
//PLAN_ENUM.SET_TIMEOUT 的轮询间隔，也可以充当 PLAN_ENUM.OB_SERVER 的节流时间
millisec:500,
//PLAN_ENUM.OB_SERVER 的监控范围
obServerConfig:{
attributes:false,
childList:true,
subtree:true,
characterData:false
},
//PLAN_ENUM.OB_SERVER 的节流间隔
delay:500,
//PLAN_ENUM.OB_SERVER 下具体监控节点
obElem:'app'
});
工程架构总览与执行简述⬆
程序执行步骤简述
继续开发计划⬆
- [x] 增加sandBox(可选)
黑名单配置运行时验证start前验证- [ ] 增加微前端模式
- [ ] 可配置执行浏览器空闲执行
- [ ] resultType增加removeNode逻辑实现
- [ ] 构建aio,es,umd区分