今天要談的不是前端鑒權(quán)這個(gè)比較大的話題，而是談前端權(quán)限的控制。
在項(xiàng)目中遇到一個(gè)問題是管理員才有新建專輯按鈕，普通用戶沒有。
那么如何展示呢？
在前端領(lǐng)域，一般會(huì)有兩種權(quán)限控制方法，一種是根據(jù)路由權(quán)限控制，另一種是結(jié)構(gòu)的顯示隱藏。現(xiàn)在遇到的這個(gè)問題，顯然用第二種方法控制最簡單。
因此，就在頁面中寫一個(gè)方法。判斷是否有權(quán)限，然后在按鈕上v-if一個(gè)data屬性。
但是這種方案有一個(gè)弊端，就是每個(gè)頁面都需要寫這樣的方法和屬性（當(dāng)然可以用mixin來實(shí)現(xiàn)）
因此，更簡便的方案是什么呢？自定義指令
開發(fā)一個(gè)自定義指令
首先添加判斷是否有權(quán)限的方法：

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

定義一個(gè)指令：

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);
        }
      }
    });
  }
})

可以看到，當(dāng)用戶權(quán)限列表不包含傳入的字符串時(shí)，就將這個(gè)元素刪除掉。

在項(xiàng)目最外層的main.js中引入這個(gè)指令。那么在我們需要用到這個(gè)權(quán)限指令的時(shí)候就可以這樣使用：

<el-button @click="handleAddAlbum" v-permission="'管理素材專輯'" size="medium" type="primary">
    <i class="btn_add_icon"></i>新增專輯
</el-button>

至此，這就是利用自定義指令控制前端權(quán)限的方案