{"id":15186348,"url":"https://github.com/2ue/validate-permission","last_synced_at":"2026-02-02T05:03:17.792Z","repository":{"id":143889900,"uuid":"524100839","full_name":"2ue/validate-permission","owner":"2ue","description":"A simpler user permission verification that supports react (functional) calls, vue2/vue3, vue instructions, etc","archived":false,"fork":false,"pushed_at":"2024-09-06T08:08:15.000Z","size":127,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-26T13:44:25.380Z","etag":null,"topics":["permission","permissions","react","react-permission","validate-permission","vue","vue-permission","vue2","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2ue.png","metadata":{"files":{"readme":"README-cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-12T13:36:45.000Z","updated_at":"2024-09-06T08:08:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"2b009d5c-7b6f-4c30-8844-16479b51b599","html_url":"https://github.com/2ue/validate-permission","commit_stats":{"total_commits":114,"total_committers":2,"mean_commits":57.0,"dds":"0.19298245614035092","last_synced_commit":"6e01e9786c4845fbecd50236a6296434975bb9de"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/2ue/validate-permission","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2ue%2Fvalidate-permission","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2ue%2Fvalidate-permission/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2ue%2Fvalidate-permission/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2ue%2Fvalidate-permission/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2ue","download_url":"https://codeload.github.com/2ue/validate-permission/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2ue%2Fvalidate-permission/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29006081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T04:25:24.522Z","status":"ssl_error","status_checked_at":"2026-02-02T04:24:51.069Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["permission","permissions","react","react-permission","validate-permission","vue","vue-permission","vue2","vue3"],"created_at":"2024-09-27T18:01:22.027Z","updated_at":"2026-02-02T05:03:17.758Z","avatar_url":"https://github.com/2ue.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 权限校验工具：validate-permission\n\n\u003e `validate-permission`是一个多功能的权限校验库，它为开发者提供了一种灵活且高效的方式来校验用户权限。这个工具不仅支持React的函数式调用，还兼容Vue的原型链调用和自定义指令，使其能够适应不同的开发场景和需求。\n\n## 安装指南\n\n通过npm包管理器，您可以轻松地将`validate-permission`集成到您的项目中。只需在项目的根目录下运行以下命令即可完成安装：\n\n``` shell\nnpm install --save validate-permission\n```\n\n## API概览\n\n`validate-permission`提供了一个简洁的API接口，使得权限管理变得简单直观。以下是其主要的导出方法：\n\n``` javascript\nimport { setPermissions, getPermissions, validate, install, directive } from 'validate-permission';\n```\n\n### setPermissions\n\n此方法用于设置用户的权限集，是所有权限检测方法的前置步骤。您需要在调用任何校验方法之前，确保已经通过此方法为用户设置了正确的权限集。\n当然你也可以不调用此方法，但是你需要在每次调用权限校验方法时额外传入权限集参数\n\n#### 使用setPermissions\n\n```javascript\nimport { setPermissions, validate } from 'validate-permission';\nconst permissions = ['USER.LIST', 'USER.ADD', 'USER.EDIT', \"USER.DELETE\"];\nsetPermissions(permissions);\n// 是否具有用户列表权限\nvalidate.is('USER.LIST');\n// 是否具有用户列表，新增用户，编辑用户，删除用户所有权限\nvalidate.all(['USER.LIST', 'USER.ADD', 'USER.EDIT', \"USER.DELETE\"]);\n// 是否具有用户新增和用户编辑其中一个权限\nvalidate.oneOf(['USER.ADD', 'USER.EDIT']);\n// 是否具有用户新增，编辑，删除其中两个权限\nvalidate.atLeast({\n    value: ['USER.ADD', 'USER.EDIT', 'USER.DELETE'],\n    n: 2\n});\n```\n\n#### 不使用setPermissions\n\n```javascript\nimport { setPermissions, validate } from 'validate-permission';\nconst permissions = ['USER.LIST', 'USER.ADD', 'USER.EDIT', \"USER.DELETE\"];\n// 是否具有用户列表权限\nvalidate.is('USER.LIST', permissions);\n// 是否具有用户列表，新增用户，编辑用户，删除用户所有权限\nvalidate.all(['USER.LIST', 'USER.ADD', 'USER.EDIT', \"USER.DELETE\"], permissions);\n// 是否具有用户新增和用户编辑其中一个权限\nvalidate.oneOf(['USER.ADD', 'USER.EDIT'], permissions);\n// 是否具有用户新增，编辑，删除其中两个权限\nvalidate.atLeast({\n    value: ['USER.ADD', 'USER.EDIT', 'USER.DELETE'],\n    n: 2\n}, permissions);\n```\n\n### getPermissions\n\n当需要在自定义逻辑中使用用户的权限集时，此方法可以方便地获取当前用户的权限列表。\n\n### install\n\n此方法专门用于Vue集成，允许您在Vue应用中直接使用`use`方法来访问权限校验功能。\n\n### directive\n\n提供Vue自定义指令，使得在Vue模板中可以直接使用权限校验功能。\n\n### validate\n\n这是一组函数式调用方法，适用于React或其他函数式框架，提供了多种校验方式：\n\n- `validate.is(permission)`：检测用户是否具有特定的权限。\n- `validate.all(permissionsArray)`：检测用户是否具有一组权限，并且所有权限都必须匹配。\n- `validate.atLeast(options)`：检测用户是否具有一组权限中的至少`n`个。\n- `validate.oneOf(permissionsArray)`：检测用户是否至少具有一组权限中的一个。\n\n``` shell\nimport { validate } from 'validate-permission';\n\n// 检测用户权限\nconsole.log('是否拥有用户列表权限：', validate.is('USER.PAGE'));\nconsole.log('是否拥有用户新增和编辑权限：', validate.all(['USER.ADD', 'USER.EDIT']));\n\n// 检测用户是否至少拥有某组权限中的两个\nconsole.log('是否至少拥有用户新增、编辑、删除权限中的两个：', validate.atLeast({\n    value: ['USER.ADD', 'USER.EDIT', 'USER.DELETE'],\n    n: 2\n}));\n\n// 检测用户是否拥有某组权限中的任何一个\nconsole.log('是否拥有用户新增或编辑权限：', validate.oneOf(['USER.ADD', 'USER.EDIT']));\n```\n\n## 使用示例\n\n### 设置用户权限集\n\n在使用`validate`方法之前，您需要先设置用户的权限集。这通常在用户登录成功后，从服务器获取权限数据时进行：\n\n``` javascript\nimport { setPermissions } from 'validate-permission';\n\n// 假设从服务器获取到的权限集\nconst permissions = ['USER.PAGE', 'USER.ADD', 'USER.EDIT', 'USER.DELETE'];\n\n// 设置当前用户的权限集\nsetPermissions(permissions);\n```\n\n### 获取用户权限集\n\n在自定义权限校验逻辑时，您可能需要获取用户的权限集：\n\n``` javascript\nimport { getPermissions } from 'validate-permission';\n\n// 获取当前用户的权限集并打印\nconsole.log('当前用户权限集：', getPermissions());\n```\n\n### Vue2集成\n\n#### 自定义注册指令\n\n在Vue项目中，您可以将`validate-permission`的指令注册为全局指令，以便在模板中使用：\n\n``` javascript\nimport Vue from 'vue';\nimport { directive } from 'validate-permission';\n\n// 注册全局指令\nVue.directive('permission', directive);\n```\n\n然后，在Vue组件中，您可以这样使用：\n\n``` vue\n\u003ctemplate\u003e\n    \u003c!-- 使用自定义指令进行权限校验 --\u003e\n    \u003cbutton v-permission:is=\"'USER.PAGE'\"\u003e用户列表权限\u003c/button\u003e\n    \u003cbutton v-permission:all=\"['USER.PAGE', 'USER.EDIT']\"\u003e用户页面和编辑权限\u003c/button\u003e\n    \u003c!-- 更多权限校验方式 --\u003e\n\u003c/template\u003e\n```\nps: `v-permission`和`v-permission:is`是等价的\n\n#### 内置方法直接注册\n\n或者，您也可以直接使用`validatePermission`提供的内置方法：\n\n``` javascript\nimport Vue from 'vue';\nimport { install } from 'validate-permission';\n\n// 使用内置方法\nVue.use(install);\n// 默认是使用permission作为指令名，使用时直接v-permission\n// 默认是使用$permission作为实例方法名，使用时直接this.$permission\n\n// 或者手动指定directiveKey和instanceKey\nVue.use(install, {\n    directiveKey: 'validate-permission',\n    instanceKey: '$validatePermission',\n});\n```\n\n在Vue组件中，您可以直接通过`this.$permission`访问权限校验功能，同样你也可以使用`v-permission`：\n\n``` vue\n\u003ctemplate\u003e\n    \u003c!-- 使用内置方法进行权限校验 --\u003e\n    \u003cbutton v-permission:is=\"{ value: 'USER.PAGE' }\"\u003e用户列表权限\u003c/button\u003e\n    \u003c!-- 更多内置方法的使用 --\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    methods: {\n        checkPermission() {\n            // 使用this.$permission进行权限校验\n            console.log('是否拥有用户列表权限：', this.$permission.is('USER.PAGE'));\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n### React/Vue3或函数式调用\n\n在React或其他支持函数式编程的框架中，您可以这样使用`validate-permission`：\n\n``` javascript\nimport { validate } from 'validate-permission';\n\n// 检测用户权限\nconsole.log('是否拥有用户列表权限：', validate.is('USER.PAGE'));\nconsole.log('是否拥有用户新增和编辑权限：', validate.all(['USER.ADD', 'USER.EDIT']));\n// 更多函数式调用的使用\n```\n\n`validate-permission`工具以其灵活性和易用性，为开发者在权限管理方面提供了强大的支持。无论是在React中进行函数式编程，还是在Vue中创建复杂的权限指令，它都能满足您的需求。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2ue%2Fvalidate-permission","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2ue%2Fvalidate-permission","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2ue%2Fvalidate-permission/lists"}