vue3自定义指令实现标签级权限控制

vue3使用自定义指令directive 实现标签级别权限控制

1. 我们在用vue写偏后台的项目时长长会涉及到权限控制，如果你是自己搭建的项目而不是用成熟的模板的话，那一定绕不过去权限控制，话不多说，正片开始～～

2. 新建逻辑处理文件 permission.js 放在哪看项目结构或者个人习惯，一般放根目录

3. permission.js逻辑处理部分

export default function permission(app) {
  app.directive('permission', {
    mounted(el, binding) {
      if (!permsJudge(binding.value)) {
        el.parentNode.removeChild(el);
      }
      function permsJudge(value) {
        let perms = ['admin','游客'];
        if (value && value instanceof Array) {
          if (value.length > 0) {
            const permissionRoles = value;
            const hasPermission = perms.some((role) => {
              return permissionRoles.includes(role);
            });
            return hasPermission;
          }
        } else {
          throw new Error(`need roles Array! Like v-permission="['admin','editor']"`);
        }
      }
    },
  });
}

let perms = [‘admin’,‘游客’]; 此处替换为项目真实权限列表即可

代码解读：函数接受一个app参数 这个参数从全局main.js中传入（就是createApp实例） directive 新建指令需接受两个参数
1：不含’v-’ 开头的字符串，也就是指令名称。
2：一个对象
3：这个对象中的钩子函数mounted接受两个参数el和binding el：指令绑定到的元素。这可以用于直接操作 DOM，binding 是一个对象 其中value是我们需要的：传递给指令的值 ，加油很多属性可自行查阅
指令中的钩子函数还有好多个 可自行查阅官网vue自定义指令穿送门

最后就是平平无奇的js逻辑处理

在main.js中引入注册

import { createApp } from 'vue';

import App from './App.vue';

const app = createApp(App);

import permission from './permission.js';

permission(app);

app.mount('#app');

最后，在项目中任意一个.vue文件标签中即可使用

<div v-permission="['admin']">123</div>
//或者多个权限满足一个即可
<div v-permission="['admin','test']">456</div>

如果都不包含，即用户没有该权限，节点就会被删除

如此，标签级别的权限控制指令就封装完毕啦～～～