如何用vue3 js写一个自定义指令用来按钮鉴权，附上代码

要使用 Vue3 中的自定义指令来为按钮添加权限检查功能，你可以创建一个名为 `v-auth-button` 的指令。这个指令会检查用户是否具有执行某个操作（比如访问特定资源）所需的权限。以下是如何实现它的简要步骤：

首先，在你的 Vue 组件里安装 Vue 自定义指令插件，如果还没安装，可以在 main.js 或者你项目的入口文件中引入：

import { createApp } from 'vue';
import App from './App.vue';

// 如果没有安装，安装 vue-directive-component
// npm install vue-directive-component --save-dev
import Vdc from 'vue-directive-component';

const app = createApp(App);
app.use(Vdc);

/* ... 其他配置 ... */

然后，创建一个名为 `authButtonDirective.js` 的文件，定义你的自定义指令：

export default {
  // 指令名称
  name: 'authButton',

  // 指令属性
  props: ['permission'],

  // 指令的 bind 方法，当指令被绑定到元素时调用
  inserted: function (el, binding) {
    el.addEventListener('click', (event) => {
      if (!this.hasPermission()) {
        event.preventDefault(); // 阻止默认点击行为
        this.$emit('denied'); // 触发自定义事件通知父组件
      }
    });
  },

  // 检查用户是否有指定的权限
  hasPermission() {
    // 这里根据你的应用逻辑进行判断，可能从 vuex、API 或者 localStorage 获取用户的权限
    // 假设我们有一个布尔值 permissions 可供检查
    return this.permission === this.$store.getters['permissions/key'];
  },
};

现在在你的组件模板中使用新创建的指令：

<!-- 使用指令 -->
<button v-auth-button="requiredPermission">访问资源</button>

<script setup lang="ts">
import { ref } from 'vue';
import authButton from '@/directives/authButton';

// 示例中的 requiredPermission 是你从组件外部传递给该按钮的权限值
const requiredPermission = ref(false); // 或者从父组件通过 props 传入

// 注册自定义指令
authButton.directive;
</script>

每次用户尝试点击这个按钮，如果没有权限，会阻止默认点击行为并触发 `denied` 事件，让你可以在父组件或视图层处理这个情况。