permission-jiniu v1.2.6

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

PermissionPluginClass.js

插件使用方法

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