va

vue-authorized

Used for vue3 based on ABAC permission verification component

Showing:

Popularity

Downloads/wk

0

GitHub Stars

200

Maintenance

Last Commit

2mos ago

Contributors

1

Package

Dependencies

0

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

用于Vue3, 基于 ABAC 权限验证

安装

npm i vue-authorized -S
# or
yarn add vue-authorized

使用

一个典型的例子:

authority 参数接收 string/Array/number/boolean , 如果是数组则有任意一个匹配则验证通过

<template>
  <Authorized
    authority="user:add"
  >
    <div>有权限则显示</div>
  </Authorized>
</template>

<script lang="ts">
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)
    })
  }
})
</script>

通过 API Authorized.checked 验证权限

<template>
  <div v-if="hasPerm">有权限则显示</div>
</template>

<script lang="ts">
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,
    }
  }
})
</script>

接收插槽 no-match 没有权限的情况下显示内容:

<template>
  <Authorized
    authority="user:add"
  >
    <div>有权限则显示</div>

    <template v-slot:no-match>
      无权限
    </template>
  </Authorized>
</template>

无权限传入 null, 请不要传入空数组,因为权限集可能是异步加载,可能会导致触发2次事件等其他BUG

<script lang="ts">
import Authorized from 'vue-authorized'

// Good
Authorized.setPermissions(null)

// Bad
Authorized.setPermissions([])

属性

参数描述类型默认值是否必填
authority校验是否有权限string/boolean/number/unknow[]-

事件

参数描述
no-match权限校验不通过触发

LICENSE

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100