fes.js/packages/fes-plugin-permission/index.js

import { reactive } from 'vue';


let accessibleElementTags = null;

// TODO 支持异步函数
export const addAccessibleElementTags = (elementTags) => {
    if (accessibleElementTags) {
        if (typeof elementTags === 'string') {
            accessibleElementTags.push(elementTags);
        } else {
            accessibleElementTags.push(...elementTags);
        }
    }
};

// TODO 移除权限 + 支持异步函数
export const delAccessibleElementTags = () => {
    console.log('todo');
};

// 验证一个资源是否可以访问
export const accessibleValidator = (elementTag) => {
    elementTag = elementTag.split('?')[0];
    if (Array.isArray(accessibleElementTags) && accessibleElementTags.length > 0) {
        if (elementTag === '' && accessibleElementTags.includes('/')) return true;
        if (elementTag) {
            for (let i = 0; i < accessibleElementTags.length; i++) {
                if (elementTag === accessibleElementTags[i]) {
                    return true;
                }
                // 支持*匹配
                const reg = new RegExp(`^${accessibleElementTags[i].replace('*', '.+')}$`);
                if (reg.test(elementTag)) {
                    return true;
                }
            }
        }
    }
    return true;
};


export const createPermissionHandler = () => ({
    async install(app, options, ctx) {
        try {
            if (typeof options.accessibleElementTags === 'function') {
                const elementTags = await options.accessibleElementTags(ctx);
                accessibleElementTags = reactive(elementTags || []);
            } else {
                accessibleElementTags = reactive(options.accessibleElementTags || []);
            }
            const elWeakMap = new WeakMap();
            app.directive('permission', (el, binding) => {
                // TODO 当 accessibleElementTags 变更的时候调用 forceUpdate 更新组件
                if (!elWeakMap.has(el)) {
                    elWeakMap.set(el, {
                        display: el.style.display
                    });
                }
                const elementTags = Array.isArray(binding.value) ? binding.value : binding.value;
                if (elementTags.some(elementTag => accessibleValidator(elementTag))) {
                    el.style.display = elWeakMap.get(el).display;
                } else {
                    el.style.display = 'none';
                }
            });

            // TODO 异步权限
            ctx.router.beforeEach(to => accessibleValidator(to.path));

            ctx.accessibleValidator = accessibleValidator;
            ctx.accessibleElementTags = accessibleElementTags;
        } catch (err) {
            console.error(err);
        }
    }
});