vue3 + TS 自定义按钮指令权限

需求：通过自定义指令去控制某个按钮的操作权限

下面代码使用js 以及 ts 两种不同写法

使用指令

// 自己的权限集合 如果存在 ：‘11:22:33’ 这个权限值，那就代表着有该按钮的操作权限

<button v-Permi="'11:22:33'">提交</button>

// 权限集合中没有：11:22:66
<button v-Permi="'11:22:66'">驳回</button>

在目录下创建一个 directive 文件存放全局指令
为了方便管理 所有的全局值指令，创建一个index.js 进行集中管理指令

// index.js 
// 这样需要一个一个注册，相当麻烦
import permissionJurisdiction from './permission-jurisdiction.js';
export default registerDiretives(app){
    permissionJurisdiction(app);
}

// 所以可以这么写
import permissionJurisdiction from './permission-jurisdiction.js';
const directives = {
    permissionJurisdiction,
    // 其他引入指令
};
// 进行循环注册指令
const registerDirective = (app) => {
    Object.keys(directives).forEach((key) => {
        app.directive(key, directives[key]);
    });
};
export default registerDirective;

在 permission-jurisdiction.js 文件中进行对某个操作的按钮进行权限控制

// permission-jurisdiction.js

export default function(app) {
    app.directive('Permi', {
        mounted(el, bindings) {
            // 获取到指令的值
            let permi = bindings.value;
            // 判断当前是否存在值
            if (!permi) return console.error("自定义指令值缺失");
            // 是否为管理者：这里设置固定值,
            let isSuperAdmin = false;
            // 权限集合
            let permiList = ["11:22:33", "11:22:44", "11:22:55"];
            
            // 判断当前按钮值是否存在权限集合中并且当前用户是否为超级管理者
            if (!permiList.includes(permi) && !isSuperAdmin) {
                // 对没有权限的dom 进行 remove
                return el.parentNode.removeChild(el);
            }
            return;
        },
    })
}

最后在main.js 进行引入

// main.js
import registerDirective from '@/diretives'
// 传入app
registerDirective(app);

最后运行效果

image.png

Vue3+ TS写法

// 指令注册于导出
// 引入Directive 和 app
import { Directive, App } from 'vue';
import permission from './permission';
// 放入类中
const directives = {
    permission
};
// 注册指令
const registerDirective = (app: App) => {
    Object.keys(directives).forEach((key) => {
        app.directive(key, (directives as { [key: string]: Directive })[key]);
    });
};
export default registerDirective;

// 在 permission.ts 文件中
import { Directive, DirectiveBinding } from 'vue';
// import { useStore } from "vuex"
// 使用了类型进行注册
const permission: Directive = {
  // mounted :Directive挂载生命周期
  mounted: (el: HTMLElement, bind: DirectiveBinding) => {
    // const store = useStore();
    // roleData需要自己去引入
    const roleData = ['Deleted'];
    const { value } = bind;
    // 判断是否为超级管理员
    // const isAdmin = store.isAdmin??false;
    // if (isAdmin) return;

    //判空以及判断类型 
    if (value && value instanceof Array) {
      if (value.length > 0) {
        const permissionRoles = value;
        // 判断是否存在权限
        const hasPermission = roleData.some((role) => {
          return permissionRoles.includes(role);
        });
        // 返回值为false 删除节点
        if (!hasPermission){
          return el.parentNode && el.parentNode.removeChild(el);
        }
      }
    } else {
      throw new Error('权限值为空或权限值类型错误');
    }
  }
};

export default permission;