Vue3 按钮权限控制（自定义指令）

前言

很多后台管理系统会用到权限管理。菜单权限比较好控制，按钮权限相对来说复杂一些，在此以Vue3为例，介绍如何通过自定义指令来判断是否拥有权限，动态控制按钮的显示（无废话）

---

一、效果展示

控制前

控制后

二、实现

1.获取权限数据

前端接收后端传回的权限数据，将其存到Vuex或者sessionStorage中，在具体的业务中，可以是进行系统登录时获取数据。权限数据格式如下。

[
'system:user:list', 'system:user:query', 'system:user:add', 
'system:user:edit', 'system:user:delete', 'system:user:role', 
'system:user:resetPwd', 'system:role:list', 'system:role:query', 
'system:role:add', 'system:role:edit', 'system:role:delete', 
'system:role:menu', 'system:menu:list', 'system:menu:query', 
'system:menu:add', 'system:menu:edit', 'system:menu:delete'
]

本人采用存入sessionStorage的方法，代码如下

//权限数组的名称是perms
sessionStorage.setItem('perms',perms)

2.自定义指令

（1）首先来写权限判断的方法，如下：

function permsJudg(value){
    let perms = JSON.parse(sessionStorage.getItem("perms"));
    for (let item of perms) {
        if (item === value) {
            return true;
        }
    }
    return false;
}

思路：

1. 先从sessionStorage获取到perms数组
2. 遍历perms中的每一个元素，与传入的value值进行匹配，如果相同，代表有权限返回true，默认情况返回false（此处判断为后面显示按钮标签做准备）

（2）定义指令

定义一个 “ v-has ” 的指令

    app.directive('has', {
        mounted(el, binding) {
            if (!permsJudge(binding.value)) {
                el.parentNode.removeChild(el);
            }
        }
    });

1. app 是一个vue应用对象，这个方法呢是写在单独的一个js文件里面，所以，要在main.js中引用，传入一个app对象（const app = createApp(App) ）
2. mounted 是指该指令在绑定元素的父组件及他自己的所有子节点都挂载完成后调用的方法
3. permsJudge(binding.value)比较绑定的值，如果为false，则移除该标签el.parentNode.removeChild(el)，true的话，不执行，代表有权限

（3）完整方法

export default function btnPerms(app) {
    app.directive('has', {
        mounted(el, binding) {
            if (!permsJudge(binding.value)) {
                el.parentNode.removeChild(el);
            }
            function permsJudge(value){
                let perms = JSON.parse(sessionStorage.getItem("perms"));
                for (let item of perms) {
                    if (item === value) {
                        return true;
                    }
                }
                return false;
            }
        }
    });
}

3.设置全局指令

import { createApp } from 'vue'
import App from './App.vue'
//按钮权限控制方法
import btnPerms from "@/sys/btnPerms";

const app = createApp(App);
btnPerms(app)
app.mount('#app')

如此，就可以使用v-has这个指令了

三、使用

        <el-button
                type="success"
                :icon="DocumentAdd"
                @click="handleDialog(null)"
                v-has="'system:role:add'">
          新增
        </el-button>

---

结束

以上为全部内容，欢迎讨论，记录学习！