当前位置：首页 > VUE

vue实现按钮及权限

2026-01-21 13:44:46VUE

Vue 实现按钮及权限控制

在 Vue 中实现按钮及权限控制可以通过多种方式完成，以下是一些常见的方法：

自定义指令方式

创建自定义指令 v-permission，用于控制按钮的显示与隐藏：

// main.js 或单独指令文件
Vue.directive('permission', {
  inserted: function (el, binding) {
    const permissions = ['edit', 'delete'] // 从store或API获取实际权限列表
    if (!permissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

使用方式：

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

组件封装方式

创建权限按钮组件 PermissionButton.vue：

<template>
  <button v-if="hasPermission">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    permission: {
      type: String,
      required: true
    }
  },
  computed: {
    hasPermission() {
      const userPermissions = this.$store.state.user.permissions
      return userPermissions.includes(this.permission)
    }
  }
}
</script>

使用方式：

<permission-button permission="delete">删除</permission-button>

混入(Mixin)方式

创建权限混入：

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

使用方式：

<button v-if="$hasPermission('create')">新建</button>

基于路由的权限控制

在路由守卫中进行权限验证：

router.beforeEach((to, from, next) => {
  const requiredPermission = to.meta.permission
  const userPermissions = store.state.user.permissions

  if (requiredPermission && !userPermissions.includes(requiredPermission)) {
    next('/forbidden')
  } else {
    next()
  }
})

动态菜单权限

根据权限动态生成菜单：

computed: {
  filteredMenu() {
    return this.allMenuItems.filter(item => {
      return !item.permission || this.$hasPermission(item.permission)
    })
  }
}