{"_id":"@3scarecrow/use-permission","name":"@3scarecrow/use-permission","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@3scarecrow/use-permission","version":"1.0.0","description":"A tool for managing permission data in the form of directives, components, and methods.","author":{"name":"3scarecrow"},"type":"module","types":"dist/use-permission.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c"},"main":"dist/use-permission.umd.min.js","repository":{"type":"git","url":"git+https://github.com/3scarecrow/use-permission.git"},"homepage":"https://github.com/3scarecrow/use-permission#readme","bugs":{"url":"https://github.com/3scarecrow/use-permission/issues"},"license":"MIT","keywords":["permission","directive","component"],"devDependencies":{"@rollup/plugin-buble":"1.0.3","@rollup/plugin-commonjs":"25.0.7","@rollup/plugin-node-resolve":"15.2.3","@types/vue":"2.0.0","rollup":"4.5.0","rollup-plugin-dts":"6.1.0","rollup-plugin-terser":"7.0.2","rollup-plugin-typescript2":"0.36.0","typescript":"5.2.2"},"dependencies":{"vue":"2.6.14"},"gitHead":"bd6cbebbfe3688aa77b85f0ba2e9535ca769db3b","_id":"@3scarecrow/use-permission@1.0.0","_nodeVersion":"18.0.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-pk36dT0AOV0HNjMcd+12HJMxo7vK9z3WBpJNaoRCpfrHEeP9dPDUgOh8uLlNs+bMCdcGCMS7vpMGT8uY2kb9yg==","shasum":"8b9571842094312e0f58899dcbc4b8b200992cdf","tarball":"https://registry.npmjs.org/@3scarecrow/use-permission/-/use-permission-1.0.0.tgz","fileCount":6,"unpackedSize":14031,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuOmBOSvPJOJWQh3WvZrcZvSeVbVDkfRHAGZbeo4J9VAiA9ybNlDSTgMeLIdPymsnFp/XB+R6e7BCz4nKKB3qKgzw=="}]},"_npmUser":{"name":"3scarecrow","email":"1648314523@qq.com"},"directories":{},"maintainers":[{"name":"3scarecrow","email":"1648314523@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-permission_1.0.0_1700344305329_0.2911062663922901"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-18T21:51:45.233Z","1.0.0":"2023-11-18T21:51:45.512Z","modified":"2023-11-18T21:51:45.747Z"},"maintainers":[{"name":"3scarecrow","email":"1648314523@qq.com"}],"description":"A tool for managing permission data in the form of directives, components, and methods.","homepage":"https://github.com/3scarecrow/use-permission#readme","keywords":["permission","directive","component"],"repository":{"type":"git","url":"git+https://github.com/3scarecrow/use-permission.git"},"author":{"name":"3scarecrow"},"bugs":{"url":"https://github.com/3scarecrow/use-permission/issues"},"license":"MIT","readme":"# usePermission\n一个以指令、组件和方法等方式来管理权限数据的工具。\n\n该工具适用于一些需要**权限控制**的地方，例如操作权限，访问页面权限等等。\n\n## 安装\n\n```sh\nyarn add @3scarecrow/use-permission --dev\n\n# or\n\nnpm install @3scarecrow/use-permission --save-dev\n```\n\n## 用法\n\n> **/permission.js\n\n```js\nimport Vue from 'vue'\nimport usePermission from '@3scarecrow/use-permission'\n\nconst {\n  component,\n  directive,\n  setPermission,\n  hasPermission,\n  watchPermission,\n} = usePermission()\n\n// 注册返回的 vue 组件格式数据\nVue.use('Permission', component)\n// 注册返回的 vue 指令格式数据\nVue.directive('permission', directive)\n\nexport {\n  setPermission,\n  hasPermission,\n  watchPermission\n}\n```\n\n可在 `main.js` 文件中引入 `permission.js` 文件\n\n> main.js\n\n```js\n// ...\nimport './permission.js'\n```\n\n之后可在 router 的 beforeEach 导航守卫去获取全部的权限，并保存当前用户的权限\n\n```js\nimport { setPermission, hasPermission } from '**/permission'\n\nrouter.beforeEach(async (to, from, next) => {\n  // 还没获取权限，则调接口获取权限\n  if (!hasPermission('obtained')) {\n    const permissionList = await getPermission()\n    // 假如 permissionList = ['sys.export', 'sys.delete']\n    permissionList.forEach(key => {\n      setPermission(key, true)\n    })\n  }\n})\n```\n\n组件中使用如下\n\n> src/views/index.vue\n\n```vue\n<template>\n  <!-- 以组件形式使用 -->\n  <Permission name=\"sys.export\">\n    <button>导出</button>\n  </Permission>\n  <!-- 以指令形式使用 -->\n  <button v-permission=\"'sys.export'\">导出</button>\n  <!-- 还可以方法形式使用 -->\n  <button v-if=\"hasPermission('sys.export')\"></button>\n</template>\n\n<script>\nimport { hasPermission } from '***/permission.js'\nexport default {\n  methods: {\n    hasPermission\n  }\n}\n</script>\n```\n\n## API\n\n### usePermission\n\n- **类型:** `Function`\n\n- **参数:** `{Object} initPermissionMap`\n\n- **返回值:** `{Object}`\n\n- **用法:**\n\n  调用该工厂函数可得到组件、指令、以及方法\n\n  ```js\n  const {\n    component,\n    directive,\n    hasPermission,\n    setPermission,\n    watchPermission\n  } = usePermission({})\n  ```\n\n  返回对象的各个属性具体可参考下面对应属性的说明\n\n### component\n\n- **类型:** `Component`\n\n- **用法:**\n\n  通过以组件方式来控制按钮是否有权限显示\n\n  ```vue\n  <!-- 使用字符类型控制按钮显示 -->\n  <AuthPermission name=\"sys.export\">\n    <button>导出</button>\n  </AuthPermission>\n\n  <!-- 对于需要多个权限控制显示的可使用数组的数据类型 -->\n  <AuthPermission :name=\"['sys.export', 'sys.delete']\">\n    <button>导出</button>\n  </AuthPermission>\n  ```\n\n  - **Props**\n\n  | 参数 | 类型 | 默认值 | 说明 |\n  | ---- | --- | ------ | ---- |\n  | name | `string | Array<string>` | `[]` | 权限组件对应的字段 |\n\n### directive\n\n- **类型:** `Directive`\n\n- **指令表达式的类型:** `string | Array`\n\n- **用法:**\n\n  通过以指令方式来控制按钮是否有权限显示\n\n  ```vue\n  <!-- 使用字符类型控制按钮显示 -->\n  <button v-permission=\"'sys.export'\">导出</button>\n  \n  <!-- 对于需要多个权限控制显示的可使用数组的数据类型 -->\n  <button v-permission=\"['sys.export', 'sys.delete']\">导出</button>\n  ```\n\n### hasPermission(key)\n\n- **类型:** `Function`\n\n- **参数:** `{string} key`\n\n- **返回值:** `{boolean}`\n\n- **用法:**\n\n  `hasPermission` 方法可用于判断权限映射中对应 `key` 是否具有权限\n\n  ```js\n  hasPermission('sys:export') // true\n  ```\n\n### setPermission(keyOrObj, [value])\n\n- **类型:** `Function`\n\n- **参数:**\n  - `{string | Object} keyOrObj`\n  - `{boolean} value`\n\n- **用法:**\n\n`setPermission` 方法用于设置权限映射中对应 `key` 的值\n\n```js\n// 设置单个 key\nsetPermission('sys.export', true)\n// 以对象格式设置多个 key\nsetPermission({\n  'sys.export': true,\n  'sys.delete': true,\n  'sys.edit': true,\n})\n```\n\n### watchPermission(key, callback)\n\n- **类型:** `Function`\n\n- **参数:**\n  - `{string} key`\n  - `{Function} callback`\n\n- **返回值:** `{Function} unwatch`\n\n- **用法:**\n\n  `watchPermission` 方法可用于监听某个 `key` 的变化，并执行回调。\n\n  同时该方法返回一个取消观察函数，可用来取消监听，取消回调\n\n  ```js\n  const unwatch = watchPermission('sys.export', (val) => {})\n  // 调用 unwatch 函数停止观察\n  unwatch()\n  ```\n","readmeFilename":"README.md"}