Vue自定义指令实现按钮级别的权限控制demo

vuex中用户信息中的权限列表

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    userInfo: {
      name: 'Suk',
      roles: ['add', 'delete'] // 管理员有哪些权限
    }
  },
  mutations: {},
  actions: {},
  getters: {},
})
export default store

页面按钮: 

<template>
  <div class="test">
    {{ userInfo.name }}拥有的按钮权限:
    <el-button data-rule="add" v-btn-show="userInfo.roles">新增</el-button>
    <el-button data-rule="delete" v-btn-show="userInfo.roles">删除</el-button>
    <el-button data-rule="update" v-btn-show="userInfo.roles">修改</el-button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['userInfo'])
  },
  directives: {
    'btn-show': {
      inserted: (el, binding) => {
        // 获取到传进来的用户权限列表
        const userRoles = binding.value
        // 获取按钮自身需要的权限
        const btnRule = el.getAttribute('data-rule')
        // 判断用户是否有当前按钮权限,没有就移除按钮不显示
        if (!userRoles.includes(btnRule)) {
          el.parentNode.removeChild(el)
        }
      }
    }
  }
}
</script>

<style></style>

页面上就只显示新增和删除按钮啦~