Vue自定义指令实现按钮级权限

在很多后台管理系统中，常常需要做按钮权限控制。

当然我们可以使用v-if来实现，不过这样做，每个页面都要获取一次权限信息，代码往往很冗余。

接下来我们将封装自定义指令，来实现按钮级的权限控制。

一、先定义检测函数

检测可以显示的权限数据

// 检测传入的元素key是否可以显示
function checkKey(key) {
    // 获取权限数组
    let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;
    //如果传入的元素key不在权限数组里，则不可显示
    let index = permissionData.indexOf(key)
    if(index > -1) {
        return true;
    }else{
        return false;
    }
}

二、创建自定义指令

创建自定义指令并删除不显示的按钮

import Vue from 'vue';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const buttonPermissions = Vue.directive('btn-key',{
    /**
     * inserted：被绑定元素插入父节点时调用 
     * el：指令所绑定的元素，可以用来直接操作 DOM
     * binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
     */
    inserted(el,binding){
        let buttonKey = binding.value;
        // 代表某个元素需要通过权限验证
        if(buttonKey){
            let key = checkKey(buttonKey)
            if(!key){//没有权限
                el.remove()  //删除按钮
            }
        }else{
            throw new Error('缺少唯一指令')
        }
    },
}) 

三、封装

基于封装原则，将其封装

新建 permissions.js 文件

import Vue from 'vue';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const buttonPermissions = Vue.directive('btn-key',{
    /**
     * inserted：被绑定元素插入父节点时调用 
     * el：指令所绑定的元素，可以用来直接操作 DOM
     * binding.value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
     */
    inserted(el,binding){
        let buttonKey = binding.value;
        // 代表某个元素需要通过权限验证
        if(buttonKey){
            let key = checkKey(buttonKey)
            if(!key){//没有权限
                el.remove()  //删除按钮
            }
        }else{
            throw new Error('缺少唯一指令')
        }
    },
}) 

// 检测传入的元素key是否可以显示
function checkKey(key) {
    // 获取权限数组
    let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;
    //如果传入的元素key不在权限数组里，则不可显示
    let index = permissionData.indexOf(key)
    if(index > -1) {
        return true;
    }else{
        return false;
    }
}

四、使用方式

1、全局挂载

在 main.js 文件中引入

import {} from './common/permissions'

 2、登录成功后、将权限数组缓存

    //模拟权限数组
    let arr = [1,3,5,7];
    sessionStorage.setItem("permissionData", arr)  // 缓存权限数据

3、使用方式

    <!-- v-btn-key="2"  值为权限数组对应数据 这里就不过多展示 -->
    <button v-btn-key="2">按钮二</button>
    <button v-btn-key="3">按钮三</button>

五、效果

设置权限前

 设置权限后