feat: Dynamically get the menu from the back end

packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.ts

@@ -0,0 +1,63 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { filterTree, mapTree } from '@vben-core/toolkit';
+/**
+ * 动态生成路由 - 前端方式
+ */
+async function generateRoutesByFrontend(
+  routes: RouteRecordRaw[],
+  roles: string[],
+  forbiddenComponent?: RouteRecordRaw['component'],
+): Promise<RouteRecordRaw[]> {
+  // 根据角色标识过滤路由表,判断当前用户是否拥有指定权限
+  const finalRoutes = filterTree(routes, (route) => {
+    return hasVisible(route) && hasAuthority(route, roles);
+  });
+
+  if (!forbiddenComponent) {
+    return finalRoutes;
+  }
+
+  // 如果有禁止访问的页面，将禁止访问的页面替换为403页面
+  return mapTree(finalRoutes, (route) => {
+    if (menuHasVisibleWithForbidden(route)) {
+      route.component = forbiddenComponent;
+    }
+    return route;
+  });
+}
+
+/**
+ * 判断路由是否有权限访问
+ * @param route
+ * @param access
+ */
+function hasAuthority(route: RouteRecordRaw, access: string[]) {
+  const authority = route.meta?.authority;
+
+  if (!authority) {
+    return true;
+  }
+  return (
+    access.some((value) => authority.includes(value)) ||
+    menuHasVisibleWithForbidden(route)
+  );
+}
+
+/**
+ * 判断路由是否需要在菜单中显示
+ * @param route
+ */
+function hasVisible(route?: RouteRecordRaw) {
+  return !route?.meta?.hideInMenu;
+}
+
+/**
+ * 判断路由是否在菜单中显示，但是访问会被重定向到403
+ * @param route
+ */
+function menuHasVisibleWithForbidden(route: RouteRecordRaw) {
+  return !!route.meta?.menuVisibleWithForbidden;
+}
+
+export { generateRoutesByFrontend, hasAuthority, hasVisible };