Vue项目优化——高精度权限控制（自定义指令directive）

学习笔记：

我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。

针对这种情况，我们可以通过全局自定义指令来处理：

我们先在新建个 utils.js 文件，用于存放相关的全局函数；

// utils.js
// 判断是否有权限函数封装
export function checkPermission (key) {
  // 例
  let arr = [ 1 ,  2 ,  3 ,  4 ,  5]
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

然后在将 checkPermission 函数引入main.js中:

// main.js
import { checkPermission } from "./common/utils";
Vue.directive("permission", {
  inserted (el, binding) {
    let permission = binding.value; // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkPermission(permission);
      if (!hasPermission) {
         // 没有权限 移除Dom元素 或者根据项目需求自行处理DOM
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  }
});    

最后我们在页面中就可以通过自定义指令 v-permission 来判断：

<div class="btns">
    <button v-permission="1">权限按钮1</button>  // 会显示
    <button v-permission="5">权限按钮2</button>  // 无显示
    <button v-permission="2">权限按钮3</button> // 会显示
 </div>

补充：Vue自定义指令的使用场景就是方便使用者对DOM进行底层的操作