vue3 自定义指令实现权限管理

一、 配置自定义指令

在 src 下创建 /directive/index.ts 文件

import type { App } from 'vue'
import { regHasRole } from './modules/hasRole'

// 统一管理指令
export const regDirective = (app: App<Element>) => {
  regHasRole(app)
}

创建 hasRole.ts 文件

import type { App } from 'vue'
import { useUserStore } from '@/stores'

export const regHasRole = (app: App<Element>) => {
  app.directive('hasRole', {
    mounted(el, binding) {
      // el 调用指令的元素
      // binding.value 调用指令时传入的数据
      // userStore.roles 权限数组 ['user:view','user:del',...]
      const userStore = useUserStore()
      // 判断是否有传入的权限字符
      if (!userStore.roles.includes(binding.value)) {
        // 从 dom 上删除
        el.remove()
      }
    }
  })
}

在 mian.ts 中 引入

// 自定义指令
import { regDirective } from './directives'

const app = createApp(App)
regDirective(app)

二、调用自定义指令

<template>
  <el-button v-hasRole="'user:view'"></el-button>
</template>