利用自定义指令进行前端权限控制

今天要谈的不是前端鉴权这个比较大的话题，而是谈前端权限的控制。
在项目中遇到一个问题是管理员才有新建专辑按钮，普通用户没有。
那么如何展示呢？
在前端领域，一般会有两种权限控制方法，一种是根据路由权限控制，另一种是结构的显示隐藏。现在遇到的这个问题，显然用第二种方法控制最简单。
因此，就在页面中写一个方法。判断是否有权限，然后在按钮上v-if一个data属性。
但是这种方案有一个弊端，就是每个页面都需要写这样的方法和属性（当然可以用mixin来实现）
因此，更简便的方案是什么呢？自定义指令
开发一个自定义指令
首先添加判断是否有权限的方法：

import Vue from 'vue'
import store from '@/store'
// 是否有权限
const hasPermission = (userPermission, permissionsList = []) => {
  let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission];
  return userPermissionList.some(e => permissionsList.includes(e));
};

定义一个指令：

Vue.directive('permission', {
  bind: (el, binding, vnode) => {
    store.dispatch('clad/db/get', {
      dbName: 'sys',
      path: 'user.info',
      defaultValue: {},
      user: true
    }, {root: true}).then(res => {
      if (Object.prototype.toString.call(binding.value) === '[object Array]') {
        if (!hasPermission(res.data_range, binding.value)) {
          el.parentNode.removeChild(el);
        }
      } else {
        if (!hasPermission(binding.value, res.permissions)) {
          el.parentNode.removeChild(el);
        }
      }
    });
  }
})

可以看到，当用户权限列表不包含传入的字符串时，就将这个元素删除掉。

在项目最外层的main.js中引入这个指令。那么在我们需要用到这个权限指令的时候就可以这样使用：

    新增专辑

至此，这就是利用自定义指令控制前端权限的方案