Vue中权限组件和权限指令

最新推荐文章于 2024-09-25 09:46:48 发布

Happy_ForestXie

最新推荐文章于 2024-09-25 09:46:48 发布

阅读量946

点赞数

分类专栏： vue

vue 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了权限管理中两种实现方式：权限组件与指令组件。权限组件提供灵活性，但每次使用需引用；指令组件使用简便，适用于首次加载，但缺乏实时数据检查能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：权限组件，优点可以很灵活，缺点每个地方使用都要引用这个组件


<script>
import{check} from '../util/auth';
export default {
    functional:true,
    props:{
        authority:{
            type:Array,
            required:true
        }
    },
    render(h,context){
        const {props,scopedSlots} = context;
        return check(props,authority) ? scopedSlots.default():null;
    }
}
</script>

二：指令组件：优点使用方便，缺点无法实时的检查数据，只使用于第一次使用，不太灵活

import{check} from './util/auth'

function install(Vue,options={}){
    Vue.directive(options.name ||'auth',{
        inserted(el,binding){
            if(!check(binding.value)){
                el.parentNode&&el.parentNode.removeChild(el)
            }
        }
    })
}
export default {install};