vue权限控制的实现

<template>
  <div>
    <!-- 使用自定义指令 v-hasPermission="['system:user:add']" 来控制按钮的显示 -->
    <button v-hasPermission="['system:user:add']">添加用户</button>
  </div>
</template>
 
<script>
export default {
  // 组件逻辑...
}
</script>
 
<directive>
// 自定义指令 v-hasPermission，用于检查用户是否拥有操作权限
Vue.directive('hasPermission', {
  // 当绑定元素插入到DOM中
  inserted: function (el, binding) {
    // 获取用户的权限列表
    const permissions = store.state.user.permissions;
    // 检查用户是否拥有权限
    const hasPermission = permissions.some(permission => binding.value.includes(permission));
 
    if (!hasPermission) {
      // 如果没有权限，移除绑定的元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});
</directive>

这个代码实例展示了如何在Vue中使用自定义指令来控制元素的显示，基于用户的权限列表来决定是否移除绑定的元素。这是一种简单的权限控制方法，适用于列表中的权限控制，但不适用于复杂的动态权限场景。