vue指令实现权限

vue指令实现权限控制

在Vue中可以通过自定义指令实现前端权限控制，通常结合后端返回的权限数据或角色信息进行判断。以下是几种常见的实现方式：

基于v-permission指令

// 全局注册权限指令
Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters.permissions // 从vuex获取权限列表

    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="['add','edit']"`)
    }
  }
})

使用方式：

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

基于角色控制的v-role指令

Vue.directive('role', {
  inserted: function (el, binding, vnode) {
    const { value } = binding
    const roles = store.getters.roles // 从vuex获取角色列表

    if (value && value instanceof Array && value.length > 0) {
      const hasRole = roles.some(role => {
        return value.includes(role)
      })

      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定角色数组，如v-role="['admin','editor']"`)
    }
  }
})

动态权限更新处理

当用户权限发生变化时，需要重新渲染相关组件：

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

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

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

按钮级别权限控制

结合自定义指令和组件实现更细粒度的控制：

Vue.directive('auth', {
  inserted: function (el, binding) {
    const auths = store.state.user.auths
    if (!auths.includes(binding.value)) {
      el.style.display = 'none'
    }
  }
})

路由级别权限控制

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

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

最佳实践建议

1. 权限数据应存储在Vuex中集中管理
2. 权限验证逻辑应当与业务代码解耦
3. 对于复杂权限系统，建议使用RBAC模型
4. 前端权限控制必须与后端验证配合使用
5. 考虑添加权限变更时的自动刷新机制

以上实现方式可以根据项目实际需求进行调整和组合使用，构建适合项目的权限控制系统。