【vue3】vue3按钮控制权限指令

---

前言

在Vue 3中，可以通过自定义指令来实现按钮的权限控制。以下是一个简单的例子，演示如何创建一个权限指令

---

一、vue3指令

// buttonPermission.js

/*
 * 按钮权限指令
 */

import { useBtns } from '@/pinia/modules/btns'

export const buttonPermission = (app, router) => {
  app.directive('btnPermission', {
    mounted(el, binding) {

      // 获取权限值
      const flag = binding.value;

      // 检查用户是否拥有该权限
      const hasPermission = checkUserPermission(flag);

      if (!hasPermission) {
        // 如果用户没有权限
        el.parentNode.removeChild(el)
      }
    }
  })
}

function checkUserPermission(flag) {
  // 获取定义在pinia里面的按钮权限列表
  const { buttonPermissions } = useBtns()

  return buttonPermissions.some(item => {
    return item.name === flag;
  })
}

引入使用

import buttonPermission from 'buttonPermission.js'

buttonPermission(app, router);

<div id="app">
  <button v-btn-permission="'admin'">管理员按钮</button>
  <button v-btn-permission="'editor'">编辑按钮</button>
</div>