实现原理

在按钮上设置标签数值，利用 vue 的指令功能获取按钮实例对象和按钮上绑定的标签数值，与从接口拿到的按钮权限数据进行匹配，如果匹配成功，说明有权限，反之没有权限。则在指令处理函数中编写代码移除(隐藏)该按钮。

const state = {
  permissions: []
};
const getters = {
  custinfo: state => {
    return {
      permissions:state.permissions,
    }
  }
};
const mutations = {
  setPermissions: (state, permissions) => {
    state.permissions = permissions
    window.sessionStorage.setItem('filler_Permissions',JSON.stringify(permissions));
  },
  getPermissions(state) {
    let editTab = window.sessionStorage.getItem('filler_Permissions');
    state.permissions = JSON.parse(editTab);
  },
};

const actions = {
  setPermissions({
    commit
  },value) {
    commit("setPermissions",value);
  },
  getPermissions({
    commit
  }) {
    commit("getPermissions");
  }
};
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

缓存权限数据

this.$store.dispatch('menus/setPermissions', permsArray)
  • 这里先触发action，再由action触发mutations，将数据缓存

指令实现

export default {
  //被绑定元素插入父节点时调用
  inserted(el, binding, vnode) {
    console.log(binding.value);
    const authCode = binding.value
    if (!authCode) {
      return;
    }
    const auth = window.sessionStorage.getItem('filler_Permissions') || '[]'
    let flag = true
    if (Array.isArray(authCode)) flag = auth.includes(authCode[0])
    else flag = auth.includes(authCode)
    // flag为false，则表示没有权限
    if (!flag) el.style.display = 'none'
    
    也可以在渲染时直接移除元素
    //el.parentNode && el.parentNode.removeChild(el)
    
}
import hasPermi from './permission/hasPermi';
const install = function (Vue) { 
    Vue.directive('hasPermi', hasPermi)
}
if (window.Vue) {
    window['hasPermi'] = hasPermi
    Vue.use(install);
}
export default install

在main.js文件中全局挂载

Vue.use(directive)

vue自定义指令控制按钮权限_Vue

页面使用

在v-button按钮中加入

v-hasPermi="'system:alarmrule:edit'" //命名的权限名称 system:alarmrule:edit