Vue自定义v-has指令实现按钮权限判断

Vue自定义指令可以帮助我们封装业务逻辑，实现更好的代码复用和可维护性。本文将详细介绍如何通过自定义指令实现按钮权限判断。

1. 创建指令

首先我们需要创建一个自定义指令，用于检查当前用户是否有权限操作某个按钮。我们可以将这个指令命名为v-has：

Vue.directive('has', {
  inserted (el, binding) {
    const { value } = binding
    if (!checkPermission(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

在指令的inserted生命周期中，我们获取了binding.value，这里可以传入一个权限标识。我们通过checkPermission函数来判断当前用户是否有这个权限，如果没有则从DOM树中删除这个元素。

2. 使用指令

使用自定义指令非常简单，只需要在需要检查权限的元素上添加v-has指令即可，如下所示：

<template>
  <div>
    <button v-has="'createUser'">创建用户</button>
    <button v-has="'deleteUser'">删除用户</button>
  </div>
</template>

这里我们分别给两个按钮添加了v-has指令，分别传入了'createUser'和'deleteUser'作为权限标识。此时，当用户没有createUser权限时，第一个按钮将会被自动从DOM树中删除。

3. 完整示例

<template>
  <div>
    <button v-has="'createUser'">创建用户</button>
    <button v-has="'deleteUser'">删除用户</button>
  </div>
</template>

<script>
Vue.directive('has', {
  inserted (el, binding) {
    const { value } = binding
    if (!checkPermission(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

function checkPermission (permission) {
  // 根据当前用户的角色和权限，判断是否有该权限
  return true | false
}

export default {
  name: 'ButtonPermission'
}
</script>

上面的示例中，我们通过一个名为ButtonPermission的组件来展示按钮权限判断。使用时，只需要将该组件引入到需要使用的地方即可。

4. 示例说明

下面给出两个示例，分别用于实现按钮权限判断中的两种情况。

4.1 通过角色判断权限

在某个系统中，管理员和普通用户拥有不同的权限。管理员可以创建和删除用户，普通用户只能查看用户信息。我们可以通过角色来判断权限。

function checkPermission (permission) {
  const userRole = getUserRole()
  if (userRole === 'admin') {
    return true
  } else if (userRole === 'user') {
    if (permission === 'viewUser') {
      return true
    }
  }
  return false
}

4.2 通过权限标识判断权限

在某个系统中，权限列表存储在后台数据库中。我们可以通过权限标识来查询后台数据，判断当前用户是否有该权限。

async function checkPermission (permission) {
  const result = await queryPermission(permission)
  return result.success
}

在上面的示例中，我们假设queryPermission是一个异步函数，用于向后台发起查询权限的请求。如果返回结果中的success属性为true，则说明当前用户拥有该权限。