Xjh22222228 Vue Authorized Save

用于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 或 空数组

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

Authorized.setPermissions(null)
// or
Authorized.setPermissions([])

属性

事件

LICENSE

MIT