vue指令实现权限

vue指令实现权限控制

权限控制在Vue项目中可以通过自定义指令实现，主要分为全局指令和局部指令两种方式。以下是一个完整的实现方案：

全局权限指令实现

在main.js或单独的文件中定义全局指令：

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const { value } = binding
    const permissions = ['admin', 'editor'] // 实际应从store或接口获取

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = permissions.some(permission => {
        return value.includes(permission)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限数组，如v-permission="['admin']"`)
    }
  }
})

组件内局部指令

在单个组件中定义指令：

export default {
  directives: {
    permission: {
      inserted: function (el, binding) {
        const userRoles = this.$store.getters.roles
        if (!userRoles.includes(binding.value)) {
          el.style.display = 'none'
        }
      }
    }
  }
}

动态权限更新处理

当用户权限变化时需要更新DOM显示状态：

Vue.directive('permission', {
  update: function (el, binding) {
    const currentPermissions = store.getters.permissions
    const requiredPermissions = binding.value

    const hasPermission = requiredPermissions.some(perm => 
      currentPermissions.includes(perm)
    )

    if (!hasPermission) {
      el.style.display = 'none'
    } else {
      el.style.display = ''
    }
  }
})

路由级别权限控制

结合vue-router实现路由守卫：

router.beforeEach((to, from, next) => {
  const hasPermission = store.getters.permissions.includes(to.meta.permission)
  if (to.meta.permission && !hasPermission) {
    next('/403')
  } else {
    next()
  }
})

权限指令使用示例

在模板中使用v-permission指令：

<template>
  <button v-permission="['admin']">管理员按钮</button>
  <div v-permission="['editor', 'reviewer']">编辑区域</div>
</template>

最佳实践建议

权限数据应统一存储在Vuex中，通过getters获取 初始加载时从后端API获取用户权限列表 配合路由meta信息实现完整的权限体系 对于无权限元素可以采用移除DOM或display:none两种方式 生产环境应添加权限指令的错误处理逻辑

这种实现方式既保持了Vue的响应式特性，又能灵活控制各种粒度（元素、组件、路由）的权限展示。