https://github.com/xjh22222228/vue-authorized
Used for vue3 based on ABAC permission verification component
https://github.com/xjh22222228/vue-authorized
abac vue-authorized vue3
Last synced: 6 months ago
JSON representation
Used for vue3 based on ABAC permission verification component
- Host: GitHub
- URL: https://github.com/xjh22222228/vue-authorized
- Owner: xjh22222228
- License: mit
- Created: 2018-03-17T05:47:07.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2022-08-25T16:28:19.000Z (about 3 years ago)
- Last Synced: 2025-03-31T06:08:25.875Z (7 months ago)
- Topics: abac, vue-authorized, vue3
- Language: JavaScript
- Homepage:
- Size: 1.79 MB
- Stars: 231
- Watchers: 7
- Forks: 50
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
用于Vue3, 基于 ABAC 权限验证
## 安装
```bash
npm i vue-authorized -S
# or
yarn add vue-authorized
```
## 使用
一个典型的例子：
`authority` 参数接收 `string`/`Array`/`number`/`boolean` , 如果是数组则有任意一个匹配则验证通过
```vue
有权限则显示
import { defineComponent } from 'vue'
import Authorized from 'vue-authorized'
export default defineComponent({
components: {
Authorized
},
setup() {
// 通常情况从API取得权限集
fetch('/permissions').then(res => {
// ['user:add', 'user:del', ...]
const permissions = res.json()
// 设置权限, 接收一个数组
Authorized.setPermissions(permissions)
})
}
})
```
通过 API `Authorized.checked` 验证权限
```vue
有权限则显示
import { defineComponent } from 'vue'
import Authorized from 'vue-authorized'
export default defineComponent({
components: {
Authorized
},
setup() {
// 接收第二个参数 target，默认为true, 权限通过则返回 target
// Authorized.checked('user:add', 'hello') // => 'hello'
const hasPerm = Authorized.checked('user:add')
return {
hasPerm,
}
}
})
```
接收插槽 `no-match` 没有权限的情况下显示内容：
```vue
有权限则显示
无权限
```
无权限传入 `null` 或 空数组
```vue
import Authorized from 'vue-authorized'
Authorized.setPermissions(null)
// or
Authorized.setPermissions([])
```
## 属性
| 参数 | 描述 |类型 | 默认值 |是否必填 |
| ------------- |------------------- |-------------- |------ |------ |
| authority | 校验是否有权限 | `string`/`boolean`/`number`/`unknow[]` | - | 否 |
## 事件
| 参数 | 描述 |
| ------------- |------------------- |
| no-match | 权限校验不通过触发 |
## LICENSE
[MIT](./LICENSE)