按钮权限设置

后台管理系统自定义按钮权限，

1.按钮权限通过后台管理，通常是由后台将权限列表统一返回。

2.将后台返回的权限列表进行筛选将按钮list存在store中。并放入浏览器缓存

3.新建一个自定义指令的文件夹directive并创建文件夹module在其中创建permission.js文件

import store from "../../store";

export default {
  inserted(el, binding, vnode) {
  //获取vuex中的按钮权限列表
    let btnPermission = store.state.vuex_menu.buttonList;
    if (btnPermission && j.length) {
      if (!btnPermission.filter(v => {
        return v.buttonId === binding.value;
      }).length) {
        if (el.parentNode) {
          el.parentNode.removeChild(el);
        } else el.remove();
      }
    } else {
      if (el.parentNode) {
        el.parentNode.removeChild(el);
      } else el.remove();
    }
  },
}

4.在文件夹directive创建一个index.js，将其引入

import permission from "./module/permission";

const importDirective = Vue => {
  /**
   * 权限指令 v-permission
   */
  Vue.directive('permission', directive.permission)
}

export default importDirective

5.在main.js中引入并注册

import Vue from 'vue'
import importDirective from '@/directive'
/**
 * 注册指令
 */
importDirective(Vue)

6.接下来只需要在需要的按钮上加v-permission="（对应的id）"就可以了