1.动态获取权限并根据获取权限转换成相对应的router

根据请求获取菜单数据，对菜单数据进行转换，分别进行下面几步：

/*** 组件地址前加斜杠处理*/
export function addSlashToRouteComponent(routeList: AppRouteRecordRaw[]) {routeList.forEach((route) => {const component = route.component as string;if (component) {const layoutFound = LayoutMap.get(component);if (!layoutFound) {route.component = component.startsWith("/") ? component : `/${component}`;}}route.children && addSlashToRouteComponent(route.children);});return routeList;
}

利用import函数+通配符，引入匹配的所有vue页面,如下：

const LayoutMap = new Map<string, () => Promise<typeof import("*.vue")>>();

以及const dynamicViewsModules = import.meta.glob("../../views/**/*.{vue,tsx}");

该map会生成一个以页面路径为key的，带有@import动态引入的方法为值的对象，这是可以通过处理key字符串，通过获取的菜单列表匹配对应的path，最终的component 就等于dynamicViewsModules[path]

function dynamicImport(dynamicViewsModules: Record<string, () => Promise<Recordable>>, component: string) {const keys = Object.keys(dynamicViewsModules);const matchKeys = keys.filter((key) => {const k = key.replace("../../views", "");const startFlag = component.startsWith("/");const endFlag = component.endsWith(".vue") || component.endsWith(".tsx");const startIndex = startFlag ? 0 : 1;const lastIndex = endFlag ? k.length : k.lastIndexOf(".");return k.substring(startIndex, lastIndex) === component;});if (matchKeys?.length === 1) {const matchKey = matchKeys[0];return dynamicViewsModules[matchKey];} else if (matchKeys?.length > 1) {console.log("Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure");return;}
}

处理后最终返回的数据就是生成router树状结构 

2.动态添加路由addRoute

const menuRecordRoutes: RouteRecordRaw[] = Object.entries(menuRoutes).map(([, config]) => config).sort((a: any, b: any) => a.order - b.order) as RouteRecordRaw[];
menuRecordRoutes.forEach((route) => {router.addRoute(route);});

3.自定义指令控制按钮显隐 

//main.ts中引用
const app = createApp(App);
// 全局注册 自定义指令(directive)
setupDirective(app);

import type { App } from "vue";import { hasPerm } from "./permission";// 全局注册 directive
export function setupDirective(app: App<Element>) {// 使 v-hasPerm 在所有组件中都可用app.directive("hasPerm", hasPerm);
}

//自定义指令的自定义方法
export const hasPerm: Directive = {mounted(el: HTMLElement, binding: DirectiveBinding) {// 「超级管理员」拥有所有的按钮权限const { authList } = useUserStoreHook();const { value } = binding;let result = false;if (authList.length && value) {if (Array.isArray(value)) {result = value.every((ele) => authList.includes(ele));} else {result = authList.includes(value);}}if (!result) {el.parentNode && el.parentNode.removeChild(el);}return result;},
};

页面中使用

<el-button v-hasPerm="['xxx']" :icon="Delete" size="small" text type="primary">删 除</el-button>

至此，动态菜单和按钮权限功能完成