permission-jiniu

目录结构

├─lib - 打包后的插件目录
│      demo.html
│      jn-permission-plugin.common.js
│      jn-permission-plugin.common.js.map
│      jn-permission-plugin.umd.js - 插件入口文件
│      jn-permission-plugin.umd.js.map
│      jn-permission-plugin.umd.min.js
│      jn-permission-plugin.umd.min.js.map
|
├─plugins - 插件目录 使用此目录结构，为了方便以后扩容组件或指令
│  ├─components - 组件目录
│  │  │ index.js
│  │  └─PermissionContainer - 组件
│  │      └─src - 组件代码目录
│  │              index.vue - 组件代码
│  │  |   index.js - 注册组件，并对外暴漏install方法
│  │
│  └─directives - 指令目录
│     └─PermissionCheck - 指令目录
│              index.js - 指令代码
│  |  index.js - 引入所有组件，循环执行install方法，并对外抛出install方法
│  index.js- 插件入口文件，缓存传入插件内部的相关参数，对外抛出install方法和内部类
│  IndexDb.ts - 操作indexDb的类，用于创建db，实现对indexDb的增删改查
│  PermissionPluginClass.js - 插件类，判断当前浏览器是否支持indexDb，如果不支持，则改为使用localStorage缓存数据，对外暴漏相关方法
│  Utils.js - 工具函数
|
├─public - 项目生成的文件
│      favicon.ico
│      index.html
│
└─src - 用于测试插件的项目代码目录
|    └─view - 测试插件的页面代码目录
|        └─Demo
|    |   |   index.vue
|    │   App.vue
|    │   main.js - 项目入口文件
├─package.json - 项目信息，插件信息，打包成插件命令，依赖包信息
├─.gitignore
├─.npmignore
├─babel.config.js
├─jsconfig.json
├─package-lock.json

文件内容解析

package.json

├─package.json
|    "name": "permission-jiniu",
|    "version": "0.0.2",  插件版本号
|    "description": "permission-jiniu-test",  插件描述
|    "main": "lib/jiniu-component-library-test.umd.js",  插件入口文件(此文件为打包后的插件目录下的入口文件)
|    "keywords": ["test"],  插件关键词，用于npm搜索

IndexDb.ts

| 方法 | 描述 | 参数 | | :---------------- | :-------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | | constructor | 类的构造函数，用于实例化的时候，存储相关配置， | cfg - 配置信息，参考下方插件使用方法 | | createDb | 创建 indexDb，设置监听函数，成功后创建 store,并设置主键， | - | | createObjectStore | 创建事务，设置事务监听函数，创建 store 操作对象，并返回 | - | | insertDataSync | 步插入数据，返回 Promise 对象 | (storeName, data)接收两个参数:1.数据库内的 storeName,2.插入的数据 | | insertData | 异步插入数据，成功或失败后，执行回调函数 | (storeName, data, cb)接收三个参数:1.数据库内的 storeName,2.插入的数据 3,回调函数，插入数据成功或失败后调用的函数，可不传 | | updateDataSync | 同步更新数据 | (storeName, data)接收两个参数:1.数据库内的 storeName,2.插入的数据 | | updateData | 异步更新数据 | (storeName, data, cb)接收三个参数:1.数据库内的 storeName,2.更新的数据 3,回调函数，更新数据成功或失败后调用的函数，可不传 | | queryDataSync | 同步查询数据 | (storeName, appChannelId = '')接收两个参数:1.数据库内的 storeName,2.设置为主键的 key 的 value | | queryData | 异步查询数据 | (storeName, appChannelId = '', cb)接收三个参数:1.数据库内的 storeName,2.设置为主键的 key 的 value 3,回调函数，查询数据成功或失败后调用的函数，可不传 |

PermissionPluginClass.js

| 方法 | 描述 | 参数 | | :--------------------------------- | :------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------- | | constructor | 构造函数，用于全局实例化的时候，存储相关配置，判断环境是否支持 indexDb，如果不支持，则使用 localStorage | cfg - 配置信息，参考下方插件使用方法 | | dbLogic | 如果当前浏览器环境支持 indexDb，则执行创建 indexDb，插入数据，等相关逻辑 | — | | localStorageLogic | 如果当前浏览器环境不支持 indexDb，则使用 localStorage，插入数据，等相关逻辑 | — | | getApiConfigList | 获取 api list, 配置参数 cfg 中的 apiCfg 兼容对象或数组，并返回 api list | — | | loopApiCfgListForGetData | 使用 indexDb 时，循环 api list，获取数据，并存入 indexDb | — | | getDataFromApi | 调用获取 pageEvent 数据，并存入或更新 indexDb | {appChannelId,dataChannelId,prefixUrl} | | saveOrUpdateCfgInfoToDb | 保存或更新配置信息到 cfg store | (cfgData, appChannelId)接收两个参数:1.请求接口所需要的信息，cfgData = {appChannelId,dataChannelId,prefixUrl}，2.项目唯一的 appChannelId | | setEventIdToDbOrStorage | 设置 EventId 到 indexDb 或 localStorage | (appChannelId, eventIdList)接收两个参数:1.项目唯一的 appChannelId，2.登录接口返回的当前用户拥有的事件 id 集合 | | getPageEventDataFromApiSync | 同步从接口获取 pageEventData | (apiCfg)接收一个参数，请求接口所需要的信息，{appChannelId,dataChannelId,prefixUrl} | | setUpdateStrategy | 设置更新策略，只咋 dev 环境生效 | — | | parseStorage | 将 JSON 字符串解析成 JSON 对象 | (str)接收一个参数: 1.JSON 字符串 | | getPermissionPluginDataFromStorage | 从 localStorage 中获取 permissionPluginData,返回值为 JSON 对象象 | — | | setPermissionPluginDataToStorage | 设置 permissionPluginData 到 localStorage | (permissionPluginData)接收一个参数: 1.插件所需要的所有数据 | | getPageEventFromStorageNew | 从 localStorage 中获取 pageEventData,返回值为 JSON 对象 | (appChannelId)接收一个参数: 1.项目唯一的 appChannelId | | setPageEventDataToStorageNew | 设置 pageEventData 到 localStorage | (appChannelId, pageEventData)接收两个参数: 1.项目唯一的 appChannelId, 2.该项目在微服务中配置的页面事件数据 | | getEventIdListFromStorage | 从 localStorage 中获取 eventIdList,返回值为 JSON 对象 | (appChannelId)接收一个参数: 1. 项目唯一的 appChannelId | | setEventIdListToStorageNew | 设置 eventIdList 到 localStorage 中 | (appChannelId, eventIdList)接收两个参数: 1.项目唯一的 appChannelId, 2.从登录接口获取的 eventIdList | | getPageEventDataFromApiNew | 使用 localStorage 时，从接口获取数据，并存入 localStorage | — | | handleTreeDataToHorizon | 数据处理方法，将树形数据，处理成平面，二维数组 | — | | getPermissionAsignTree | 将页面事件数据，处理成，分配权限的树形结构数据 | — | | generateRouterNew | 根据 pageEventData 生成新的路由数组 | (appChannelId)接收一个参数: 1. 项目唯一的 appChannelId | | getPageEventDataFromDbOrLocal | 外部可调用接口，根据 appChannelId 获取 pageEvent 数据 | (appChannelId)接收一个参数: 1. 项目唯一的 appChannelId | | getEventIdData | 获取 eventIdList,并返回 | (appChannelId)接收一个参数: 1. 项目唯一的 appChannelId | | handleMixinDataNew | 融合两方数据的函数，并返回一个新的路由数组 | (pageEventData, routePermissionIdList)接收两个参数: 1.项目唯一的 appChannelId, 2.该项目在微服务中配置的页面事件数据 | | handleSort1 | 冒泡排序，先按 sort,如果 sort 不存在，则默认为 0，如果 sort 相同，则按照 createTime 升序排列 | (arr)接收一个参数: 1.需要冒泡排序的数组 |

插件使用方法

1. 在项目根目录下执行 npm install permission-jiniu --save 2. main.js 中引入插件 import PermissionJiNiu from 'permission-jiniu' 3. 在 main.js 中使用插件 Vue.use(PermissionJiNiu) 4. 提供全局变量 app.provide('permissionPluginClass', new PermissionJiNiu.PermissionPluginClass(configuration));

• configuration：{} - 为配置参数，配置参数为对象，目前支持的配置参数如下：
  • apiCfg: {} - 请求接口时，需要的数据,支持数组或对象
    • appChannelId: "",
    • dataChannelId: "",
    • prefixUrl: "", 请求接口的前缀
  • dbName: '' - 创建 db 时的名称，默认 permissionPluginDb
  • updateStrategy: '' - 更新策略，目前只在 dev 环境生效
    • development: {}
      • updateTime: 更新时间，传入时间戳，多久更新一次

5. 通过 inject 注入全局变量permissionPluginClass,登录接口回调处，调用permissionPluginClass.setEventIdToDbOrStorage(appChannelId,eventIdListData);将 eventIdList 数据本地化 6. 在项目中，生成路由集合的位置，使用 inject 注入全局变量permissionPluginClass，调用await permissionPluginClass.generateRouterNew(appChannelId)，返回一个新的路由集合

• appChannelId - 项目中的 appChannelId

7. 在需要使用权限控制的页面中，

• 使用指令 v-permission="eventId"，eventId为页面事件id，支持数组、字符串，函数和布尔，如：v-permission="['11','22','33']" 或 v-permission="'11,22,33,44'"
• 使用组件 <Permission :sign="['11','22','33']" >Dom元素</Permission>

8. 项目中配置用户组菜单时，如想获取该项目在微服务中配置的页面事件数据，可调用permissionPluginClass.getPageEventDataFromDbOrLocal(appChannelId),返回该项目的页面事件数据

插件使用示例

详情请看 例子

插件打包及发布步骤

1. 编写好插件代码 2. 在项目中测试，可用 3. 执行npm run build-lib 4. 项目根目录执行 npm whoami 查看当前npm用户名 5. 如果 4 执行后，显示用户名，则，执行npm publish, 否则执行npm login，登录npm后，重新在项目根目录执行npm publish

命令解析

vue-cli-service build --target lib --name jn-permission-plugin --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