v-hasPermission

v-hasPermission是一个自定义权限指令，用于在Vue3后台项目中判断某个角色是否拥有显示某个组件的权限。该指令是通过使用自定义指令来实现的，并且需要在Vue的install函数中进行注册。
具体实现如下：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import permissionDirective from './directives/permission'

const app = createApp(App)

app.directive('hasPermission', permissionDirective)

app.mount('#app')

// directives/permission.js
export default {
  mounted(el, binding) {
    // 判断是否拥有权限，且判断传入的数据类型是否符合预期
    hasPermission(el, binding.value)
  }
}

function hasPermission(el, value) {
  // 判断传入的数据是否符合预期
  if (!Array.isArray(value)) {
    throw new Error('需要传入正确的数据类型')
  }

  // 判断是否拥有权限
  let data = store.state.ruleNames // 存储着是否拥有该请求权限的数组
  // 如果在data中包含了传入的数据字段，则代表拥有权限，没有则返回 -1，此时如果为false，则代表没有权限
  let hasAuth = value.findIndex(v => data.includes(v)) !== -1

  // 当使用的自定义指令dom存在时，且没有权限
  if (el && !hasAuth) {
    // 移除组件
    el.parentNode.removeChild(el)
  }
}