accessible.ts 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import type { Component, DefineComponent } from 'vue';
  2. import type {
  3. AccessModeType,
  4. GenerateMenuAndRoutesOptions,
  5. RouteRecordRaw,
  6. } from '@vben/types';
  7. import { defineComponent, h } from 'vue';
  8. import {
  9. cloneDeep,
  10. generateMenus,
  11. generateRoutesByBackend,
  12. generateRoutesByFrontend,
  13. isFunction,
  14. isString,
  15. mapTree,
  16. } from '@vben/utils';
  17. async function generateAccessible(
  18. mode: AccessModeType,
  19. options: GenerateMenuAndRoutesOptions,
  20. ) {
  21. const { router } = options;
  22. options.routes = cloneDeep(options.routes);
  23. // 生成路由
  24. const accessibleRoutes = await generateRoutes(mode, options);
  25. const root = router.getRoutes().find((item) => item.path === '/');
  26. // 获取已有的路由名称列表
  27. const names = root?.children?.map((item) => item.name) ?? [];
  28. // 动态添加到router实例内
  29. accessibleRoutes.forEach((route) => {
  30. if (root && !route.meta?.noBasicLayout) {
  31. // 为了兼容之前的版本用法,如果包含子路由,则将component移除,以免出现多层BasicLayout
  32. // 如果你的项目已经跟进了本次修改,移除了所有自定义菜单首级的BasicLayout,可以将这段if代码删除
  33. if (route.children && route.children.length > 0) {
  34. delete route.component;
  35. }
  36. // 根据router name判断,如果路由已经存在,则不再添加
  37. if (names?.includes(route.name)) {
  38. // 找到已存在的路由索引并更新,不更新会造成切换用户时,一级目录未更新,homePath 在二级目录导致的404问题
  39. const index = root.children?.findIndex(
  40. (item) => item.name === route.name,
  41. );
  42. if (index !== undefined && index !== -1 && root.children) {
  43. root.children[index] = route;
  44. }
  45. } else {
  46. root.children?.push(route);
  47. }
  48. } else {
  49. router.addRoute(route);
  50. }
  51. });
  52. if (root) {
  53. if (root.name) {
  54. router.removeRoute(root.name);
  55. }
  56. router.addRoute(root);
  57. }
  58. // 生成菜单
  59. const accessibleMenus = generateMenus(accessibleRoutes, options.router);
  60. return { accessibleMenus, accessibleRoutes };
  61. }
  62. /**
  63. * Generate routes
  64. * @param mode
  65. * @param options
  66. */
  67. async function generateRoutes(
  68. mode: AccessModeType,
  69. options: GenerateMenuAndRoutesOptions,
  70. ) {
  71. let resultRoutes: RouteRecordRaw[] = options.routes;
  72. switch (mode) {
  73. case 'backend': {
  74. resultRoutes = await generateRoutesByBackend(options);
  75. break;
  76. }
  77. case 'frontend': {
  78. resultRoutes = await generateRoutesByFrontend(options);
  79. break;
  80. }
  81. case 'mixed': {
  82. const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
  83. generateRoutesByFrontend(options),
  84. generateRoutesByBackend(options),
  85. ]);
  86. resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
  87. break;
  88. }
  89. }
  90. /**
  91. * 调整路由树,做以下处理:
  92. * 1. 对未添加redirect的路由添加redirect
  93. * 2. 将懒加载的组件名称修改为当前路由的名称(如果启用了keep-alive的话)
  94. */
  95. resultRoutes = mapTree(resultRoutes, (route) => {
  96. // 重新包装component,使用与路由名称相同的name以支持keep-alive的条件缓存。
  97. if (
  98. route.meta?.keepAlive &&
  99. isFunction(route.component) &&
  100. route.name &&
  101. isString(route.name)
  102. ) {
  103. const originalComponent = route.component as () => Promise<{
  104. default: Component | DefineComponent;
  105. }>;
  106. route.component = async () => {
  107. const component = await originalComponent();
  108. if (!component.default) return component;
  109. return defineComponent({
  110. name: route.name as string,
  111. setup(props, { attrs, slots }) {
  112. return () => h(component.default, { ...props, ...attrs }, slots);
  113. },
  114. });
  115. };
  116. }
  117. // 如果有redirect或者没有子路由,则直接返回
  118. if (route.redirect || !route.children || route.children.length === 0) {
  119. return route;
  120. }
  121. const firstChild = route.children[0];
  122. // 如果子路由不是以/开头,则直接返回,这种情况需要计算全部父级的path才能得出正确的path,这里不做处理
  123. if (!firstChild?.path || !firstChild.path.startsWith('/')) {
  124. return route;
  125. }
  126. route.redirect = firstChild.path;
  127. return route;
  128. });
  129. return resultRoutes;
  130. }
  131. export { generateAccessible };