permission-jiniu

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 - 组件目录
│  │  └─Permission
│  │  │   └─src 
│  │  │   │   └─index.vue - 组件代码
│  │  │   └─index.js - 注册组件，并对外暴漏install方法
│  │  │
│  └─directives - 指令目录
│  │    └─PermissionCheck - 指令目录
│  │    │    └─index.js - 指令代码
│  |    └─index.js - 注册指令，并对外暴漏install方法
│  |
│  ├─db - 指令目录
│  |    └─index.js - 操作indexDb的类，用于创建db，实现对indexDb的增删改查
│  ├─operator
│  |    └─DbOperator.js - 操作indexdb
│  |    └─StorageOperator.js - 操作localstorage
│  ├─permissionClass
│  │  └─index.js - 权限组件主要操作类
│  ├─util
│  │  └─MsCreatePageEventUtils.js - 工具函数，用于递归调用页面事件创建接口，批量创建页面事件数据
│  │  └─utils.js - 工具函数，包含格式化数据，数据排序等
│  index.js- 插件入口文件
│
└─src - 测试插件的项目代码目录
|    └─view - 测试插件的页面代码目录
|        └─Demo
|    |   |   index.vue
|    │   App.vue
|    │   main.js - 项目入口文件
└─package.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搜索

db/index.js

方法	描述	参数
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,回调函数，查询数据成功或失败后调用的函数，可不传

permissionClass/index.js

方法	描述	参数
constructor	类的构造函数，用于实例化的时候，存储相关配置，判断数据存储位置	cfg - 配置信息，参考下方插件使用方法
excuteDbLogic	浏览器支持使用indexdb，执行相关逻辑	-
excuteLocalStorageLogic	浏览器不支持使用indexdb，执行相关逻辑	-
loopApiCfgListForGetData	存储插件配置信息，循环调用接口获取页面事件数据	(storeName, data)接收两个参数:1.数据库内的 storeName,2.插入的数据
getDataFromApi	获取页面事件数据请求	(apiCfgItem)接收一个参数:1.配置信息
generateSaveToStorageDataAndSave	生成存储在localstorage中的数据，并进行存储	(appChannelId, pageEventData)接收两个参数:1.渠道号,2.页面事件数据
getPageEventDataFromApiNew	获取页面事件数据请求，并将数据存储在localstorage中	-
getPageEventDataFromApiSync	同步获取页面事件数据(外部可调用)，并更新存储在浏览器中的相关页面事件数据，然后将页面事件数据返回	(cfg)接收1个参数:字段同插件配置信息一致
getData	获取数据	(appChannelId, tableName, property)接收三个参数:1.渠道号,2.如果数据存储在indexdb中，需传入此项，为表名,3.要获取的哪个字段的值
setData	设置数据	(appChannelId, tableName, newData，property)接收4个参数:1.渠道号,2.如果数据存储在indexdb中，需传入此项，为表名,3.新数据,4.如果想设置固定字段的数据，则传此字段
getPageEventDataFromDbOrLocal	对外暴漏的方法，获取页面事件数据	(appChannelId)接收1个参数:1.渠道号
getHorizontalPageEventData	对外暴漏的方法，获取水平化的页面事件数据	(appChannelId)接收1个参数:1.渠道号
setEventIdSync	对外暴漏的方法，存储用户拥有的权限id	(appChannelId，newData)接收2个参数:1.渠道号,2.权限id集合
getNeedCacheRouter	对外暴漏的方法，获取需要缓存的路由集合	-
generateRouterNew	对外暴漏的方法，获取用户所拥有权限的路由集合	(appChannelId)接收1个参数:1.渠道号

operator/DbOperator.js 主要用于操作indexdb，设置或获取数据

方法	描述	参数
getData	获取数据	(dbIns, tableName, appChannelId, property) 接收4个参数:1.indexdb实例,2.表名,3.渠道号,4.如果想获取指定字段数据，则需要传入此参数，如不传，则返回整个数据
setData	设置数据	(dbIns, tableName, appChannelId, newData, property) 接收5个参数:1.indexdb实例,2.表名,3.渠道号,4.新数据,5.如果想更新指定字段数据，则需要传入此参数，如不传，则更新整个数据

operator/StorageOperator.js 主要用于操作indexdb，设置或获取数据

方法	描述	参数
getData	获取数据	(appChannelId, storageKey, property) 接收3个参数:1.渠道号,2.存储在storage中的变量名,3.如果想获取指定字段数据，则需要传入此参数，如不传，则返回整个数据
setData	设置数据	(appChannelId, storageKey, data, property) 接收4个参数:1.渠道号,2.存储在storage中的变量名,3.新数据,4.如果想更新指定字段数据，则需要传入此参数，如不传，则更新整个数据

util/utils.js 主要用于格式化数据，数据排序等功能

方法	描述	参数
checkPermissionFun	校验权限	-
transformDataToHorizontal	将树形结构的数据，水平化	-
handleMixinDataNew	将页面事件数据，格式化成路由数据并校验权限	-
generateBaseRouterItem	生成路由对象	-
handleSort	排序	-
deepClone	深拷贝	-

插件使用方法

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.setEventIdSync(appChannelId,eventIdListData);将 eventIdList 数据本地化，如无法通过inject获取permissionPluginClass，则需要再此文件内，通过app.runWithContext(() => inject('permissionPluginClass'))获取。 6.生成路由 在项目中，生成路由集合的位置，使用 inject 注入全局变量permissionPluginClass，调用await permissionPluginClass.generateRouterNew(appChannelId)，返回一个新的路由集合，因路由集合中每项数据的component属性为字符串，故需要将此属性值，处理成组件实例，然后通过动态路由的方式，将每个路由添加到所在项目的路由集合中 7.配置权限 在配置权限的位置调用await permissionPluginClass.getPageEventDataFromDbOrLocal(appChannelId)，获取全部页面数据，将数据处理成组件所需的数据格式，

• 1：页面事件数据中，每项数据下的isPsMg字段，表示该条数据，是否受权限控制，如果为0，则不需要分配权限，故不在设置权限的组件中展示该条数据
• 2：微服务页面事件数据配置中，名称为“是否关联父级”得配置项，该配置项表示，如果此按钮关联父级页面，则此按钮的权限，控制页面的显示/隐藏
• 3：权限配置时，因各个项目需求不一样，所有，现阶段，权限配置，只需要传入按钮id即可，如页面有一个设置了“关联父级”得按钮，如果有此按钮权限，则代表，有页面权限，否则该页面下，如果不设置全部按钮权限，则无法看到该页面
• 4：微服务配置中，是否校验权限，以最小级位单位，父级或祖父级设置此项无效，如该页面有按钮，则按钮的权限关联着页面的显示/隐藏，如菜单下有页面，则页面的权限关联着菜单的显示/隐藏

8.展示菜单 菜单栏展示时，因各个项目展示逻辑不统一，需自行处理展示数据，需注意的是：

• 1：每项数据中的isShow字段，控制这菜单的显示或隐藏，如已有改菜单权限，但是isShow为0，则不展示此菜单
• 2：每项数据中的openNewTab字段，控制点击菜单时，是否打开新标签页
• 3：每项数据中的showSubmenu字段，控制该菜单下是否展示页面
• 4：每项数据中的onlyShowPageContent字段，控制跳转到该页面时，是否展示左侧菜单
• 5：每项数据中的isCache字段，控制该页面是否需要缓存

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

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

插件使用示例

详情请看 例子

插件打包及发布步骤

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

命令

npm run vite-build

命令解析（此命令一弃用）

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