2025-03-10 16:25:30 +08:00
|
|
|
|
import type { Component, DefineComponent } from 'vue';
|
|
|
|
|
|
2024-07-28 14:29:05 +08:00
|
|
|
|
import type {
|
|
|
|
|
AccessModeType,
|
|
|
|
|
GenerateMenuAndRoutesOptions,
|
|
|
|
|
RouteRecordRaw,
|
|
|
|
|
} from '@vben/types';
|
2024-06-30 15:03:37 +08:00
|
|
|
|
|
2025-03-10 16:25:30 +08:00
|
|
|
|
import { defineComponent, h } from 'vue';
|
|
|
|
|
|
2024-07-13 16:35:47 +08:00
|
|
|
|
import {
|
2024-08-09 18:24:52 +08:00
|
|
|
|
cloneDeep,
|
2024-07-13 16:35:47 +08:00
|
|
|
|
generateMenus,
|
|
|
|
|
generateRoutesByBackend,
|
|
|
|
|
generateRoutesByFrontend,
|
2025-03-10 16:25:30 +08:00
|
|
|
|
isFunction,
|
|
|
|
|
isString,
|
2024-07-28 14:29:05 +08:00
|
|
|
|
mapTree,
|
2024-07-23 00:03:59 +08:00
|
|
|
|
} from '@vben/utils';
|
2024-07-05 23:15:46 +08:00
|
|
|
|
|
2024-07-13 16:35:47 +08:00
|
|
|
|
async function generateAccessible(
|
2024-07-06 13:28:08 +08:00
|
|
|
|
mode: AccessModeType,
|
2024-07-13 16:35:47 +08:00
|
|
|
|
options: GenerateMenuAndRoutesOptions,
|
2024-06-30 15:03:37 +08:00
|
|
|
|
) {
|
|
|
|
|
const { router } = options;
|
2024-07-05 23:15:46 +08:00
|
|
|
|
|
2024-08-09 18:24:52 +08:00
|
|
|
|
options.routes = cloneDeep(options.routes);
|
2024-06-30 15:03:37 +08:00
|
|
|
|
// 生成路由
|
|
|
|
|
const accessibleRoutes = await generateRoutes(mode, options);
|
|
|
|
|
|
2025-01-14 12:12:08 +08:00
|
|
|
|
const root = router.getRoutes().find((item) => item.path === '/');
|
|
|
|
|
|
2025-03-29 22:38:30 +08:00
|
|
|
|
// 获取已有的路由名称列表
|
|
|
|
|
const names = root?.children?.map((item) => item.name) ?? [];
|
|
|
|
|
|
2024-06-30 15:03:37 +08:00
|
|
|
|
// 动态添加到router实例内
|
2024-07-06 13:28:08 +08:00
|
|
|
|
accessibleRoutes.forEach((route) => {
|
2025-01-14 12:12:08 +08:00
|
|
|
|
if (root && !route.meta?.noBasicLayout) {
|
|
|
|
|
// 为了兼容之前的版本用法,如果包含子路由,则将component移除,以免出现多层BasicLayout
|
|
|
|
|
// 如果你的项目已经跟进了本次修改,移除了所有自定义菜单首级的BasicLayout,可以将这段if代码删除
|
|
|
|
|
if (route.children && route.children.length > 0) {
|
|
|
|
|
delete route.component;
|
|
|
|
|
}
|
2025-03-29 22:38:30 +08:00
|
|
|
|
// 根据router name判断,如果路由已经存在,则不再添加
|
2025-04-28 23:08:05 +08:00
|
|
|
|
if (names?.includes(route.name)) {
|
2025-04-28 18:19:47 +08:00
|
|
|
|
// 找到已存在的路由索引并更新,不更新会造成切换用户时,一级目录未更新,homePath 在二级目录导致的404问题
|
|
|
|
|
const index = root.children?.findIndex(
|
|
|
|
|
(item) => item.name === route.name,
|
|
|
|
|
);
|
|
|
|
|
if (index !== undefined && index !== -1 && root.children) {
|
|
|
|
|
root.children[index] = route;
|
|
|
|
|
}
|
2025-04-28 23:08:05 +08:00
|
|
|
|
} else {
|
|
|
|
|
root.children?.push(route);
|
2025-03-29 22:38:30 +08:00
|
|
|
|
}
|
2025-01-14 12:12:08 +08:00
|
|
|
|
} else {
|
|
|
|
|
router.addRoute(route);
|
|
|
|
|
}
|
2024-07-06 13:28:08 +08:00
|
|
|
|
});
|
2024-06-30 15:03:37 +08:00
|
|
|
|
|
2025-01-14 12:12:08 +08:00
|
|
|
|
if (root) {
|
|
|
|
|
if (root.name) {
|
|
|
|
|
router.removeRoute(root.name);
|
|
|
|
|
}
|
|
|
|
|
router.addRoute(root);
|
|
|
|
|
}
|
|
|
|
|
|
2024-06-30 15:03:37 +08:00
|
|
|
|
// 生成菜单
|
2025-05-03 18:05:26 +08:00
|
|
|
|
const accessibleMenus = generateMenus(accessibleRoutes, options.router);
|
2024-06-30 15:03:37 +08:00
|
|
|
|
|
|
|
|
|
return { accessibleMenus, accessibleRoutes };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Generate routes
|
|
|
|
|
* @param mode
|
2024-08-22 21:52:44 +08:00
|
|
|
|
* @param options
|
2024-06-30 15:03:37 +08:00
|
|
|
|
*/
|
|
|
|
|
async function generateRoutes(
|
2024-07-06 13:28:08 +08:00
|
|
|
|
mode: AccessModeType,
|
2024-07-13 16:35:47 +08:00
|
|
|
|
options: GenerateMenuAndRoutesOptions,
|
2024-06-30 15:03:37 +08:00
|
|
|
|
) {
|
|
|
|
|
const { forbiddenComponent, roles, routes } = options;
|
|
|
|
|
|
2024-07-28 14:29:05 +08:00
|
|
|
|
let resultRoutes: RouteRecordRaw[] = routes;
|
2024-06-30 15:03:37 +08:00
|
|
|
|
switch (mode) {
|
2024-10-16 21:23:11 +08:00
|
|
|
|
case 'backend': {
|
|
|
|
|
resultRoutes = await generateRoutesByBackend(options);
|
|
|
|
|
break;
|
|
|
|
|
}
|
2024-06-30 15:03:37 +08:00
|
|
|
|
case 'frontend': {
|
2024-07-28 14:29:05 +08:00
|
|
|
|
resultRoutes = await generateRoutesByFrontend(
|
2024-06-30 15:03:37 +08:00
|
|
|
|
routes,
|
|
|
|
|
roles || [],
|
|
|
|
|
forbiddenComponent,
|
|
|
|
|
);
|
2024-07-28 14:29:05 +08:00
|
|
|
|
break;
|
2024-06-30 15:03:37 +08:00
|
|
|
|
}
|
2025-05-28 17:01:58 +08:00
|
|
|
|
case 'mixed': {
|
|
|
|
|
const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
|
|
|
|
|
generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
|
|
|
|
|
generateRoutesByBackend(options),
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
|
|
|
|
|
break;
|
|
|
|
|
}
|
2024-06-30 15:03:37 +08:00
|
|
|
|
}
|
2024-07-28 14:29:05 +08:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 调整路由树,做以下处理:
|
|
|
|
|
* 1. 对未添加redirect的路由添加redirect
|
2025-03-10 16:25:30 +08:00
|
|
|
|
* 2. 将懒加载的组件名称修改为当前路由的名称(如果启用了keep-alive的话)
|
2024-07-28 14:29:05 +08:00
|
|
|
|
*/
|
|
|
|
|
resultRoutes = mapTree(resultRoutes, (route) => {
|
2025-03-10 16:25:30 +08:00
|
|
|
|
// 重新包装component,使用与路由名称相同的name以支持keep-alive的条件缓存。
|
|
|
|
|
if (
|
|
|
|
|
route.meta?.keepAlive &&
|
|
|
|
|
isFunction(route.component) &&
|
|
|
|
|
route.name &&
|
|
|
|
|
isString(route.name)
|
|
|
|
|
) {
|
|
|
|
|
const originalComponent = route.component as () => Promise<{
|
|
|
|
|
default: Component | DefineComponent;
|
|
|
|
|
}>;
|
|
|
|
|
route.component = async () => {
|
|
|
|
|
const component = await originalComponent();
|
|
|
|
|
if (!component.default) return component;
|
|
|
|
|
return defineComponent({
|
|
|
|
|
name: route.name as string,
|
|
|
|
|
setup(props, { attrs, slots }) {
|
|
|
|
|
return () => h(component.default, { ...props, ...attrs }, slots);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2024-07-28 14:29:05 +08:00
|
|
|
|
// 如果有redirect或者没有子路由,则直接返回
|
|
|
|
|
if (route.redirect || !route.children || route.children.length === 0) {
|
|
|
|
|
return route;
|
|
|
|
|
}
|
|
|
|
|
const firstChild = route.children[0];
|
|
|
|
|
|
|
|
|
|
// 如果子路由不是以/开头,则直接返回,这种情况需要计算全部父级的path才能得出正确的path,这里不做处理
|
2024-08-05 21:12:22 +08:00
|
|
|
|
if (!firstChild?.path || !firstChild.path.startsWith('/')) {
|
2024-07-28 14:29:05 +08:00
|
|
|
|
return route;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
route.redirect = firstChild.path;
|
|
|
|
|
return route;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return resultRoutes;
|
2024-06-30 15:03:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
2024-07-13 16:35:47 +08:00
|
|
|
|
export { generateAccessible };
|