通过directives（vue自定义指令）来控制控制按钮的权限

1、首先在store/index.js里定义好参数

2、创建一个directive/has.js自定义指令文件

3、在组件中引用，并且传参

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    buttonPermission: {
      add: true,
      edit: true,
      delete: false
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

directives/has.js

export default {
  inserted(el, bindings, vnode) {
    // console.log('进入dom结构了');
    // console.log(vnode)
    let btnPremissionValue = bindings.value;
    let flag = vnode.context.$store.state.buttonPermission[btnPremissionValue]
    !flag && el.parentNode.removeChild(el)
  }
}

组件内引用

<template>
  <div class="home">
    <h1>vue按钮级别的权限控制</h1>
    <el-button v-has="'add'">编辑</el-button>
    <el-button v-has="'edit'">添加</el-button>
    <el-button v-has="'delete'">删除</el-button>
  </div>
</template>

<script>

import has from '../directives/has'
export default {
  name: 'Home',
  directives:{
    has
  },
  data(){
    return {
      msg:'Welcome to Your Vue.js App'
    }
  }
}
</script>

add: true,

edit: true,

delete: false

显示了两个为true的按钮

配合后端接口，通过角色来判断不同的人有不同的按钮权限。