vue多个权限按钮实现

实现多个权限按钮的方法

在Vue中实现多个权限按钮控制，可以通过以下方法进行：

使用v-if或v-show指令

根据权限数据动态显示或隐藏按钮：

<template>
  <button v-if="hasPermission('create')">创建</button>
  <button v-if="hasPermission('edit')">编辑</button>
  <button v-if="hasPermission('delete')">删除</button>
</template>

<script>
export default {
  methods: {
    hasPermission(permission) {
      const userPermissions = ['create', 'edit'] // 从后端获取的实际权限列表
      return userPermissions.includes(permission)
    }
  }
}
</script>

使用自定义指令

创建权限指令实现更干净的模板：

Vue.directive('permission', {
  inserted(el, binding) {
    const requiredPermission = binding.value
    const userPermissions = ['create', 'edit'] // 实际权限数据

    if (!userPermissions.includes(requiredPermission)) {
      el.parentNode.removeChild(el)
    }
  }
})

<button v-permission="'create'">创建</button>
<button v-permission="'edit'">编辑</button>

基于角色的权限控制

通过角色判断权限：

const rolePermissions = {
  admin: ['create', 'edit', 'delete'],
  editor: ['create', 'edit'],
  viewer: ['view']
}

<button v-if="checkPermission('create')">创建</button>

<script>
export default {
  computed: {
    currentRole() {
      return 'editor' // 实际从用户数据获取
    }
  },
  methods: {
    checkPermission(permission) {
      return rolePermissions[this.currentRole].includes(permission)
    }
  }
}
</script>

使用Vuex管理权限状态

在store中集中管理权限：

// store.js
export default new Vuex.Store({
  state: {
    permissions: []
  },
  mutations: {
    setPermissions(state, permissions) {
      state.permissions = permissions
    }
  },
  getters: {
    hasPermission: state => permission => {
      return state.permissions.includes(permission)
    }
  }
})

<template>
  <button v-if="$store.getters.hasPermission('create')">创建</button>
</template>

动态权限按钮组件

创建可复用的权限按钮组件：

<!-- PermissionButton.vue -->
<template>
  <button v-if="hasPermission">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    permission: String
  },
  computed: {
    hasPermission() {
      return this.$store.getters.hasPermission(this.permission)
    }
  }
}
</script>

<permission-button permission="create">创建</permission-button>

API集成方法

从后端API获取权限数据：

async function fetchPermissions() {
  try {
    const response = await axios.get('/api/user/permissions')
    this.$store.commit('setPermissions', response.data)
  } catch (error) {
    console.error('获取权限失败', error)
  }
}

权限混入(Mixin)实现

创建权限混入复用逻辑：

// permissionMixin.js
export default {
  methods: {
    $can(permission) {
      return this.$store.state.permissions.includes(permission)
    }
  }
}

<template>
  <button v-if="$can('create')">创建</button>
</template>

<script>
import permissionMixin from './permissionMixin'
export default {
  mixins: [permissionMixin]
}
</script>

以上方法可以根据项目需求单独使用或组合使用，建议根据应用规模和复杂度选择最适合的方案。