Vue3封装自定义指令：v-permission控制权限

1.src下创建一个directives文件夹用于存放自定义的指令

2.通过路由守卫将当前登录者的信息存储到仓库

import { createRouter, createWebHashHistory } from "vue-router";
import { useUserStore } from "../store/user";
import { storeToRefs } from "pinia";

//storeToRefS是pinia库自带的方法将仓库状态变成响应式

const reotes=[
    //...路由信息
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    document.title = to.meta.title || "";
    const store = useUserStore();
    const { userInfo, purview } = storeToRefs(store);
    const promises = [];

    if (!userInfo.value) {
        promises.push(store.getUserInfo());
    }
    if (!purview.value) {
        promises.push(store.queyMenuPurview());
    }

    Promise.all(promises)
        .then(() => {
            next();
        })
        .catch((e) => {
            alert('获取登录者信息出错了')
        });
});

3.在permission.js文件下实现具体逻辑

import { watchEffect } from "vue";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";

// el是当前绑定的元素
export const vPermission = {
    mounted: (el, binding) => {
        const store = useUserStore();
        const { purview } = storeToRefs(store);
        const { value } = binding;
        if (!value) {
            throw new Error("获取权限信息失败");
        }
        watchEffect(() => {
            if (Array.isArray(purview.value) && purview.value.includes(value)) {
                el.style.display = "";
            } else {
                // el.style.display = "none";
                el.parentNode && el.parentNode.removeChild(el); 
            }
        });
    },
};

4.注册为全局指令

import { createApp } from 'vue'
import router from './router';
import { createPinia } from 'pinia';
import { vPermission } from '@/directives/index';
import '@/assets/style.css'
import App from './App.vue'


const app=createApp(App)
const pinia=createPinia()
app.use(router)
app.use(pinia)
//第一个参数为指令名称 v-permission
app.directive('permission',vPermission)
app.mount('#app')

5.组件中使用

<button v-permission="'delete'" > 删除 </button>
<button v-permission="'edit'" > 编辑 </button>