vue元件級鑑權

Authority.vue

<template>
  <slot v-if="roles.includes(auth)"></slot>
</template>

<script setup>
import { useRoles } from '../store'

//接收傳遞的許可權字串,admin,user,guest
defineProps(['auth'])

//從倉庫中取使用者許可權集合
const roles = useRoles()
</script>

使用

<Authority>
  <HellWord v-auth="admin"></HellWord>
</Authority>

元件級別鑑權好處是,如果當前許可權不足,元件不會渲染,不會走元件的生命週期
如果某個元件需要鑑權,而且在生命週期中會有很多的網路請求,則可以使用元件級鑑權