Vue3使用自定义指令实现按钮的权限管理

 1.新建directive文件夹，文件夹下面新建premission.js

         输入以下内容

export const hasPermission = {
    install(Vue){
        Vue.directive('has', {
            mounted(el, binding) {
                // 当前按钮传递的值( v-permission="'add'" 中的值)x
                console.log(binding,el,'asdfghjasdfgh')
                const currentTag = binding.value.action
                   /* function checkright(value){
                        const bindvalue = value
                        const currentRight = window.sessionStorage.getItem('right')
                        let item = currentRight.filter((item) => {
                                         return item === bindvalue
                                   })

                        // 不具备权限则删除（隐藏）或者禁用该按钮 (el.parentNode 获取当前节点的父节点),根据在芫荽绑定的值去决定
                        if (item.length === 0) {
                                el.disabled = true
                        }

                            }*/
                const effect = binding.value.effect
                // 获取存放在sessionStorage的权限
                const rightval =  window.sessionStorage.getItem('right')
                const currentRight = rightval.split(',')
                // this.$message.success(currentRight)
                // 判断是否存在对应的按钮权限
                let item = currentRight.filter((item) => {
                    return item === currentTag
                })
                //不具备权限则删除（隐藏）或者禁用该按钮 (el.parentNode 获取当前节点的父节点),根据在芫荽绑定的值去决定
                if (item.length === 0) {
                    if (effect === 'disabled') {
                        el.disabled = true
                        el.classList.add('is-disabled')
                    } else {
                        el.parentNode.removeChild(el)
                    }
                }
            }
        })
    }
}
export default hasPermission;

2.在main.js引入，并且挂载

import hasPermission from "@/directive/premission";
app.use(hasPermission)

3.在界面上使用

4.效果

 5.数据库权限格式