jn-permission-plugin v0.0.1

jiniu-permission-plugin

目录结构

/lib - 打包插件目录

/plugin - 插件目录 使用此目录结构，为了方便以后扩容组件或指令

/components - 组件目录  /PermissionContainer - 组件    /src - 组件代码目录    index.js - 注册组件，并对外暴漏install方法   index.js - 引入所有组件，循环执行install方法，并对外抛出install方法   /directives - 指令目录    /PermissionCheck - 指令目录     index.js - 指令源码    index.js - 引入所有指令，遍历注册指令   index.js - 插件入口文件，缓存传入插件内部的相关参数，对外抛出install方法和permissionPluginClass PermissionPluginClass.js - 插件内部类，此类用于请求相关接口，缓存数据，及生成菜单树  - getPageEventList() - 请求页面事件列表，获取当前项目所有的已关联事件的菜单树  - getEventIdList() - 获取当前用户已配置好的页面事件id列表，此方法保留，是传参，还是另需要调接口  - generateMenuListData() - 此方法需要开发调用的方法，融合菜单树和事件list,并返回已有权限的菜单树  - treeDataHandler() - 数据处理方法

/public - 项目生成的文件

/src - 用于测试插件的项目代码目录

/views - 测试插件的页面代码目录  App.vue  main.js - 项目入口文件  package.json - 项目信息，插件信息，打包成插件命令，依赖包信息   - "name": "jiniu-component-library-test", 插件名称   - "version": "0.0.2", 插件版本号   - "description": "jiniu-permission-plugin-test", 插件描述   - "main": "lib/jiniu-component-library-test.umd.js", 插件入口文件(此文件为打包后的插件目录下的入口文件)   - "keywords": "test", 插件关键词，用于npm搜索  vue.config.js - 项目相关配置文件

插件使用方法

1. 在项目根目录下执行 npm install jiniu-permission-plugin --save
2. main.js中引入插件 import jiniuPermissionPlugin from 'jiniu-permission-plugin'
3. 在main.js中注册插件 Vue.use(jiniuPermissionPlugin, configuration) configuration为配置参数，配置参数为对象，目前支持的配置参数如下：
   • apiUrl: '', // 请求接口地址，用于获取当前产品的页面事件列表，默认为空，为空时，将不会请求接口，直接返回空数组
   • productID: "", // 产品id，请求接口参数，默认为空，为空时，将不会请求接口，直接返回空数组
4. 在用户调用登录接口是，调用插件对外抛出的方法 permissionPluginClass.getFormatedMenuList(args)，获取页面菜单树 args 为对象，目前支持的参数如下：
   • eventIdList 为当前用户已配置好的eventId列表，如：eventId1, eventId2 如吉牛管家平台，用户登录后，userInfo中的eventIdList
   • params // 其他参数，如：{userId: 'userId'}
5. 在需要使用权限控制的页面中， 使用指令 v-permission="'eventId'"，eventId为页面事件id，如：v-permission="'eventId'" 使用组件 用于权限控制显/隐的元素

插件使用示例

详情请看 /src/views/Demo/index.vue

插件打包及发布步骤

1. 编写好插件代码
2. 在项目中测试，可用
3. 执行npm run build-lib vue-cli-service build --target lib --name jiniu-component-library-test --dest lib plugins/index.js --target lib // 默认为构建应用，改为 lib 即可启用构建库模式 --name jiniu-component-library-test // 输出文件名 --dest lib // 输出目录，默认为 dist，这里我们改为 lib plugins/index.js // 入口文件路径，默认为 src/App.vue，这里改为 plugin/index.js
4. 项目根目录执行 npm whoami 查看当前npm用户名
5. 如果4执行后，显示用户名，则，执行npm publish, 否则执行npm login，登录npm后，重新在项目根目录执行npm publish