Web-rabc-permissions-sdk NPM

web-RABC-Permissions-sdk

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'
        });