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即可

<el-button @click="xx()" v-has>xx</el-button>