(vue)vue中按钮权限控制

使用自定义指令实现

vuex

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: {
    //定义好请求的方法,这里将把后台返回的按钮权限数组储存在state里面，或者本地缓存里面
  },
  actions: {
    
  },
  modules: {
  }
})

directives->has.js

import store from '@/store'

export default {
  inserted(el,bindings,vNode) {
    //vNode->context->$store->state..
    let btnPermissionValue = bindings.value;
    console.log(bindings);
    // console.log(btnPermissionValue);
    //不引入store就在context里找
    // let boolean = vNode.context.$store.state.buttonPermission[btnPermissionValue];
    let boolean = store.state.buttonPermission[btnPermissionValue];
    !boolean && el.parentNode.removeChild(el);
  }
}

permission.vue

<template>
  <div>
    <h3>vue中按钮权限控制</h3>
    <button v-has="'add'">编辑</button>
    <button v-has="'edit'">添加</button>
    <button v-has="'delete'">删除</button>
  </div>
</template>

<script>
import has from '../directives/has'
export default {
  directives: {
    has
  }
}
</script>

<style>

</style>