当前位置：首页 > VUE

vue实现按钮及权限

2026-02-22 05:08:24VUE

Vue 按钮权限控制实现方法

在 Vue 中实现按钮级别的权限控制，通常需要结合后端返回的权限数据，通过自定义指令或组件封装的方式完成。以下是几种常见实现方案：

自定义指令控制显隐

通过 v-permission 指令动态控制按钮显示：

// main.js 或权限模块文件
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters.permissions // 从Vuex获取权限列表

    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

使用方式：

<button v-permission="'user:add'">新增用户</button>

组件封装方案

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

vue实现按钮及权限

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

<script>
export default {
  props: {
    auth: {
      type: String,
      required: true
    }
  },
  computed: {
    hasPermission() {
      return this.$store.getters.permissions.includes(this.auth)
    }
  }
}
</script>

使用方式：

<auth-button auth="user:delete">删除用户</auth-button>

动态路由结合权限

在路由守卫中处理权限映射：

// router.js
router.beforeEach((to, from, next) => {
  const permissions = store.getters.permissions
  const requiredAuth = to.meta.auth

  if (requiredAuth && !permissions.includes(requiredAuth)) {
    next('/403')
  } else {
    next()
  }
})

权限数据格式建议

后端返回的权限标识建议采用层级结构：

vue实现按钮及权限

{
  "permissions": [
    "system:user:add",
    "system:user:edit",
    "report:export"
  ]
}

按钮禁用状态处理

对于需要显示但禁用的场景：

<template>
  <button :disabled="!hasPermission('order:cancel')">
    取消订单
  </button>
</template>

<script>
export default {
  methods: {
    hasPermission(code) {
      return this.$store.getters.permissions.includes(code)
    }
  }
}
</script>

权限混入优化

创建权限检查的 mixin：

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

全局注入后可通过 this.$can('user:view') 快速校验。

以上方案可根据项目复杂度选择组合使用，建议中小型项目采用自定义指令方案，大型项目建议采用组件封装+混入的组合模式。权限标识应当与后端约定统一的命名规范，避免硬编码。