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>

组件级别鉴权好处是,如果当前权限不足,组件不会渲染,不会走组件的生命周期
如果某个组件需要鉴权,而且在生命周期中会有很多的网络请求,则可以使用组件级鉴权