Vueにおけるボタンレベル権限制御

カスタムコマンドで実現
1.ルーティングのmeta属性にbtnPermissionsを配置する
のように

path: '/xxx',
name: 'xxx',
meta:{btnPermissions:['admin','normal']},
component: resolve => require(['../xx/xx/xx.vue'], resolve)

2.カスタム命令の作成

import Vue from 'vue'

/**    **/
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    //         
    let btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
    if (!Vue.prototype.$_has(btnPermissionsArr)) {
      el.parentNode.removeChild(el);
    }
  }
});
//       
Vue.prototype.$_has = function (value) {
  let isExist = false;
  //         
  let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
  if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
    return false;
  }
  if (value.indexOf(btnPermissionsStr) > -1) {
    isExist = true;
  }
  return isExist;
};
export {has}

3.main.jsにファイルを導入する

import has from './plugins/btnPermission.js'

4.ページで制御するボタンにv-hasを付けるといいです

@click="xx()" v-has>xx