使用VUE開發專案，在進行許可權驗證的時候，例如在對某個按鈕進行許可權驗證，驗證其顯示還是隱藏。解決方法有兩種：

第一種：在頁面中進行許可權驗證，使用 v-if 來判斷按鈕的顯示和隱藏。

缺點：

1、具體的驗證需要在寫在頁面上，導致每一個檢視頁面都需要寫，對於後期維護相對比較困難。

2、如果使用 v-if 進行許可權驗證。在頁面中的按鈕顯示可能存在多個 v-if 進行判斷，同時也不利於維護。

第二種：封裝公共的許可權驗證方法來進行驗證。

缺點：雖然封裝公共許可權驗證方法，能夠更好的維護許可權驗證規則，但是仍然需要在每個頁面進行引入，判斷，對於按鈕可能也會存在多個 v-if 進行顯示和隱藏。

第三種：封裝許可權指令

優點：能夠做到統一驗證，而且全域性註冊指令，可以全域性使用指令，相對比較靈活和易於維護。

程式碼示例：

新建：directive.js

/**
 * directive
 * 指令
 */
import Vue from 'vue';

Vue.directive('permissions',{
  inserted: function(el,bind,vnode){
    // 自定義指定中無法使用this獲取VUE例項
    // vnode繫結在例項上下文
    // 所以可以用vnode.context可以解決這個問題
    let rule = vnode.context.$store.state.user.permissions;
    let permissions 
 
= rule ? rule.split(',') : [];
    let state = false;
    for(let i in permissions){
      if(bind.value == permissions[i]){
        state = true;
        break;
      }
    }
    !state ? el.remove() : '';
  }
});

在main.js中引入

import '@/utils/directive' // directive

在頁面中使用：

<el-button v-permissions="'config.add'">新增</el-button>

到此，VUE指令驗證許可權結束。