accessible.ts 4.8 KB

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