背景：在一些管理系统中，我们可能需要根据用户角色进行一些操作权限的判断，大多时候我们都是使用 v-if / v-show 来进行显示隐藏，但如果需求发生变化或者多个页面需要判断，使用v-if / v-show 不仅不雅观而且会变得很麻烦，不易维护。对于这种情况，我们可以通过全局自定义指令来处理

数据结构

项目布局为左侧菜单栏，右侧内容区布局，如下：

关于权限的数据结构分为：左侧菜单显示权限—menus[ ]，右侧内容操作权限—operations[ ]

menus: [
    {
     code: "test",
     id: "2ee70a2d-20c0-4eae-b6b1-a4daa68e7327",
     name: "菜单"
    }
]

operations: [
    {
     code: "delete",
     id: "9f967020-1827-4e4c-9278-03629f4f45dc",
     menuId: "2ee70a2d-20c0-4eae-b6b1-a4daa68e7327"
     name: "删除"
     sort: 0
    }
]

自定义指令

注册一个自定义指令有全局注册与局部注册，本文使用全局注册，对于自定义指令不了解的朋友请先移步到官方文档温习自定义指令，全局注册主要是通过Vue.directive方法进行注册

 创建一个action.js文件，位置根据项目配置选择，我的路径为 utils/directives/action.js 。

在main.js中引入这个路径 import "./utils/directives/action"

action.js写入如下代码：

import Vue from "vue";
import store from "@/store";

/**
 * Action 权限指令
 * 页面调用方法为 v-action='test.delete'
 */
const action = Vue.directive("action", {
  inserted: function (el, binding) {
    //切割传过来的test.delete，菜单Code—menuCode, 操作Code—operationCode
    const [menuCode, operationCode] = binding.value.split(".");
    // 定义空值接收有无操作权限
    let hasPermission;
    // 从vuex里获取菜单数据，找到菜单权限下标
    let menuIndex = store.state.account.menus.findIndex(
      (m) => m.code == menuCode
    );
    // 如果找不到则没有权限
    if (menuIndex < 0) {
      hasPermission = false;
    } else {
      // 根据菜单下标找到相应的菜单数据
      var menu = store.state.account.menus[menuIndex];
      // 使用some判断是否包含相应的操作权限
      hasPermission = store.state.account.operations.some(
        (m) => m.menuId == menu.id && m.code == operationCode
      );
    }
    if (!hasPermission) {
      // 没有权限 移除Dom元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  },
});

export default action;

如果要隐藏删除按钮，则 <button v-action="'test.delete'">删除</button> 

test代表菜单权限，delete表示要进行的操作。（可以自定义规则）

自定义指令传值可以传多种类型，看需求自定义就可以了。如果要传字符串，一定要加单引号