Vue自定义指令“v-permission”，页面级权限管理（以及require.context）Vue自定义指令“v-

// directives/modules/permission.js  文件位置
// v-permission 按钮权限
import { getUserPermission } from '@/utils/cache'; // 获取后端返回的权限ID
export default {
  inserted: (el, binding, vnode) => {
    const userRight = getUserPermission() || [];
    if (binding.value && !userRight.includes(binding.value)) { // 当前
      el.parentNode.removeChild(el); 
    }
  }
};

// directives/index.js  文件位置
import Vue from 'vue';

const modulesFiles = require.context('./modules', true, /\.js$/); // 拿到modeles文件夹下所有的指令文件名称

modulesFiles.keys().forEach(item => {
  const moduleName = item.replace(/^\.\/(.*)\.\w+$/, '$1');
  const value = modulesFiles(item);
  if (value.default) {
    Vue.directive(moduleName, value.default);
  }
});

// 使用 如果后端返回的权限ID中没有“85040304000” 则按钮不会显示
<el-button v-permission="'85040304000'" type="primary">新增</el-button>

// 扩展  require.context（）
 // 1、什么是 require.context？
 一个webpack的api，通过该函数可以获取一个上下文，从而实现工程自动化
 （遍历文件夹下的文件，从中获取指定文件，自动导入模块）在前端工程中，
 如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入
 
 // 2、使用
 /*
 *  dirname: string. 需要读取模块文件的所在目录
 *  useSubdirectories: boolean 是否遍历子目录
 *  RegExp：匹配的规则（正则表达式）
 */
 require.context(dirname，useSubdirectories，RegExp)；
 //举个例子
 遍历获取当前目录下所有的js文件（包括子目录）
 require.context(".", true, /(.js$)/)
 
 // 3、返回结果
  // key 返回一个数组，由匹配成功的文件所组成的数组，id 执行环境的id
  { keys: function, id: string }
  
// 4、应用场景
 // 将某文件夹下的所有文件自动导入进行分类，并挂入原型中