Vue权限控制之按钮权限

• store.js 全局数据缓存store设置

const store = new Vuex.Store({
  state: {
    permission_buttons: ['template:add']
  },
  getters:{
    permission_buttons: (state) => state.permission_buttons
  },
  mutations : {
    PERMISSION_BUTTONS: (state, data) => {
      state.permission_buttons = data
    }
  }
})

• directive.js 自定义指令逻辑编写

import Vue from 'vue'
import store from './../store'

// 注册一个全局自定义指令 `v-permission`
Vue.directive('permission', {
  // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = '*:*:*'
    const permissions = store.getters && store.getters.permission_buttons

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some((permission) => {
        return (
          all_permission === permission || permissionFlag.includes(permission)
        )
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
        // 或者：el.style.display = 'none'
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
})

• main.js 引入

import './config/directive'

• index.vue 使用

 <el-button
  type="primary"
  @click="handlerAdd"
  v-permission="['template:add']"
  >新增</el-button
>