generator-mico-cli 0.1.29 → 0.2.1

package/generators/micro-react/templates/apps/layout/config/config.dev.ts

@@ -47,7 +47,7 @@ const config: ReturnType<typeof defineConfig> = {
   define: {
     'process.env.NODE_ENV': 'development',
     'process.env.APP_ID': 'mibot_dev',
-    'process.env.API_BASE_URL': 'https://dashboard-api-test.micoplatform.com',
+    'process.env.API_BASE_URL': '',
     'process.env.PROXY_SUFFIX': '/',
     'process.env.LOGIN_ENDPOINT':
       '',

package/generators/micro-react/templates/apps/layout/config/routes.ts

@@ -15,4 +15,9 @@ export default [
     component: './Home',
     name: '首页',
   },
+  {
+    path: '/403',
+    component: './403',
+    name: '无权限',
+  },
 ];

package/generators/micro-react/templates/apps/layout/docs/arch-/350/257/267/346/261/202/346/250/241/345/235/227.md

@@ -4,7 +4,7 @@
 
 ## 功能概述
 
-HTTP 请求层模块化架构，将原 599 行单文件拆分为 6 个职责单一的模块，遵循 SRP 原则。
+HTTP 请求层模块化架构，将原 599 行单文件拆分为 7 个文件（1 个入口 + 6 个功能模块），遵循 SRP 原则。
 
 ## 模块结构
 

package/generators/micro-react/templates/apps/layout/docs/feature-/350/217/234/345/215/225/346/235/203/351/231/220/346/216/247/345/210/266.md

@@ -0,0 +1,175 @@
+# 菜单权限控制
+
+> 创建时间：2026-01-24
+
+## 功能概述
+
+基于用户信息中的 `side_menus` 字段实现菜单和路由的白名单权限控制。非超级用户只能看到和访问 `side_menus` 中配置的菜单项，访问无权限路由时显示 403 页面。
+
+## 技术方案
+
+### 技术栈
+
+- 框架：React 18 + @umijs/max
+- UI 组件：Arco Design (Result 组件)
+- 状态管理：Umi initialState
+
+### 核心实现
+
+1. 用户信息接口返回 `side_menus` 字段（白名单）
+2. `filterMenuItems` 根据白名单过滤菜单项
+3. Layout 组件对比"所有路由"和"有权限路由"判断 403
+4. 无权限时在 Layout 内直接渲染 403 组件（无跳转）
+
+### 权限判断逻辑
+
+```
+用户访问 /some-path
+    ↓
+是否是超级用户？
+    ├── 是 → 允许访问所有菜单
+    └── 否 → 检查 side_menus 白名单
+              ├── 精确匹配：menuPath === side_menus[i]
+              ├── 前缀匹配：side_menus[i].startsWith(menuPath + '.')
+              └── 都不匹配 → 禁止访问，显示 403
+```
+
+## 文件清单
+
+### 新增文件
+
+| 文件路径 | 说明 |
+|----------|------|
+| `src/pages/403/index.tsx` | 403 无权限页面组件 |
+
+### 修改文件
+
+| 文件路径 | 修改内容 |
+|----------|----------|
+| `src/common/menu/parser.ts` | 新增 `filterMenuItems`、`isMenuAllowed` 等权限过滤函数 |
+| `src/layouts/index.tsx` | 新增 `isForbidden` 判断和 403 渲染逻辑 |
+| `src/layouts/components/menu/index.tsx` | 集成菜单过滤 |
+| `config/routes.ts` | 新增 `/403` 路由 |
+
+## API / 组件接口
+
+### MenuFilterOptions
+
+```typescript
+interface MenuFilterOptions {
+  /** 是否是超级用户 */
+  isSuperuser?: boolean | number;
+  /** 允许访问的菜单路径列表（白名单） */
+  sideMenus?: string[];
+}
+```
+
+### filterMenuItems
+
+```typescript
+/**
+ * 根据权限过滤菜单项（白名单逻辑）
+ */
+function filterMenuItems(
+  items: MenuItem[],
+  options?: MenuFilterOptions,
+  parentPath?: string,
+): MenuItem[];
+```
+
+**参数说明**：
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| items | MenuItem[] | 是 | 原始菜单数据 |
+| options | MenuFilterOptions | 否 | 过滤选项 |
+| parentPath | string | 否 | 父级路径（递归用） |
+
+### isRouteAllowed
+
+```typescript
+/**
+ * 检查路由是否允许访问
+ */
+function isRouteAllowed(
+  menuPath: string,
+  options?: MenuFilterOptions,
+): boolean;
+```
+
+### 用户信息相关字段
+
+```typescript
+interface IUserInfo {
+  is_superuser: boolean | number;
+  /** 允许访问的菜单路径列表 */
+  side_menus: string[];
+  /** 缺失的操作权限（用于按钮级别控制，非菜单） */
+  miss_permissions: string[];
+}
+```
+
+## 使用示例
+
+### 用户信息接口返回
+
+```json
+{
+  "is_superuser": false,
+  "side_menus": ["列队管理.配置队列", "工作台"],
+  "miss_permissions": ["列队管理.配置队列.查看"]
+}
+```
+
+### 菜单过滤结果
+
+```
+原始菜单：
+├── 工作台           ✅ 精确匹配 "工作台"
+├── 列队管理         ✅ 前缀匹配 "列队管理.配置队列"
+│   └── 配置队列     ✅ 精确匹配 "列队管理.配置队列"
+├── 质量管理         ❌ 不在白名单
+│   └── 抽样检查     ❌ 不在白名单
+└── 权限管理         ❌ 硬编码禁止（非超级用户）
+```
+
+### Layout 中的权限判断
+
+```tsx
+// layouts/index.tsx
+const isForbidden = useMemo(() => {
+  if (currentRoute) return false; // 在有权限的路由中找到了
+  const routeInAll = findRouteByPath(allRoutes, location.pathname);
+  return !!routeInAll; // 在所有路由中存在但无权限
+}, [currentRoute, allRoutes, location.pathname]);
+
+const renderContent = () => {
+  if (isForbidden) {
+    return <ForbiddenPage />;
+  }
+  // ... 正常渲染
+};
+```
+
+## 设计决策
+
+| 决策点 | 选择 | 理由 |
+|--------|------|------|
+| 权限模型 | 白名单 (`side_menus`) | 后端返回的 `side_menus` 是允许列表，比黑名单更安全 |
+| 403 处理 | 原地渲染组件 | 保持 URL 不变，用户体验更好，便于分享链接 |
+| 父级菜单显示 | 前缀匹配 | 子菜单有权限时，父级菜单需要作为容器显示 |
+| 超级用户 | 跳过所有检查 | 管理员需要完整访问权限 |
+| 权限管理菜单 | 硬编码禁止 | 非超级用户不应看到权限管理入口 |
+
+## 注意事项
+
+- `side_menus` 为空时，非超级用户没有任何菜单权限
+- `side_menus` 格式为菜单路径，如 `"列队管理.配置队列"`
+- `miss_permissions` 用于按钮级别权限控制，不影响菜单显示
+- 403 页面在 Layout 内渲染，不会触发路由跳转
+- 调试时可在控制台搜索 `isForbidden check` 查看权限判断日志
+
+## 相关文档
+
+- [微前端模式](./feature-微前端模式.md) - 路由和菜单解析
+- [用户信息接口](./feature-用户信息接口.md) - 用户数据结构

package/generators/micro-react/templates/apps/layout/src/app.tsx

@@ -3,8 +3,6 @@ import { prefetchApps } from 'qiankun';
 import { errorConfig } from './requestErrorConfig';
 // 解决「React19 中无法使用 Message/Notification」的问题。 @see https://github.com/arco-design/arco-design/issues/2900#issuecomment-2796571653
 import * as arco from '@arco-design/web-react';
-import '@arco-design/web-react/dist/css/arco.css';
-import '@arco-design/web-react/es/_util/react-19-adapter';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -124,21 +122,22 @@ export async function getInitialState(): Promise<{
     }
   };
 
-  // 如果不是登录页面，执行
   const { location } = history;
-  if (!NO_AUTH_ROUTE_LIST.includes(location.pathname)) {
-    // 先确保 SSO 会话完成（如果 URL 中有 ticket 参数，会换取 token 并存储用户信息）
+  const isNoAuthRoute = NO_AUTH_ROUTE_LIST.includes(location.pathname);
+
+  // 非免认证路由：走 SSO 流程
+  if (!isNoAuthRoute) {
     await ensureSsoSession();
+  }
 
-    // 有 token 时，获取用户信息
-    if (getStoredAuthToken()) {
-      const userInfo = await fetchUserInfoFn();
-      if (userInfo) {
-        return {
-          fetchUserInfo: fetchUserInfoFn,
-          currentUser: userInfo,
-        };
-      }
+  // 有 token 就获取用户信息（无论在哪个页面，支持登录后 refresh 场景）
+  if (getStoredAuthToken()) {
+    const userInfo = await fetchUserInfoFn();
+    if (userInfo) {
+      return {
+        fetchUserInfo: fetchUserInfoFn,
+        currentUser: userInfo,
+      };
     }
   }
 
@@ -147,6 +146,7 @@ export async function getInitialState(): Promise<{
   };
 }
 
+
 /**
  * @name request 配置，可以配置错误处理
  * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
@@ -179,7 +179,11 @@ export function patchClientRoutes({ routes }: { routes: UmiRoute[] }) {
   const menus = getWindowMenus();
   const dynamicRoutes = extractRoutes(menus);
 
-  console.log('[app.tsx] patchClientRoutes:', { menus, dynamicRoutes, routes });
+  console.log('[app.tsx] patchClientRoutes:', {
+    menus,
+    dynamicRoutes,
+    routes,
+  });
 
   // 找到根路由（全局布局）
   const rootRoute = routes.find((r) => r.path === '/');

package/generators/micro-react/templates/apps/layout/src/common/menu/parser.ts

@@ -9,6 +9,108 @@ export const getWindowMenus = (): MenuItem[] => {
   return Array.isArray(menus) ? menus : [];
 };
 
+export interface MenuFilterOptions {
+  /** 是否是超级用户 */
+  isSuperuser?: boolean | number;
+  /** 允许访问的菜单路径列表（白名单） */
+  sideMenus?: string[];
+}
+
+const isSuperuserUser = (value?: boolean | number): boolean => {
+  return value === true || value === 1;
+};
+
+export const buildMenuPath = (parentPath: string, name: string): string => {
+  return parentPath ? `${parentPath}.${name}` : name;
+};
+
+/**
+ * 检查菜单路径是否允许访问（白名单逻辑）
+ * - 超级用户可以访问所有菜单
+ * - 非超级用户不能访问"权限管理"
+ * - 菜单路径在 sideMenus 中，或是 sideMenus 中某项的前缀（父级菜单）
+ */
+const isMenuAllowed = (
+  menuPath: string,
+  options: MenuFilterOptions,
+): boolean => {
+  // 超级用户可以访问所有菜单
+  if (isSuperuserUser(options.isSuperuser)) return true;
+
+  // 非超级用户不能访问"权限管理"
+  if (menuPath === '权限管理') return false;
+
+  const sideMenus = options.sideMenus || [];
+
+  // 如果没有配置 sideMenus，非超级用户没有任何菜单权限
+  if (sideMenus.length === 0) return false;
+
+  // 检查是否在白名单中（精确匹配或前缀匹配）
+  return sideMenus.some((allowedPath) => {
+    // 精确匹配：菜单路径完全等于白名单中的路径
+    if (menuPath === allowedPath) return true;
+    // 前缀匹配：白名单路径以菜单路径开头（说明菜单是父级）
+    if (allowedPath.startsWith(menuPath + '.')) return true;
+    return false;
+  });
+};
+
+export const isRouteAllowed = (
+  menuPath: string,
+  options: MenuFilterOptions = {},
+): boolean => {
+  return isMenuAllowed(menuPath, options);
+};
+
+/**
+ * 根据权限过滤菜单项（白名单逻辑）
+ */
+export const filterMenuItems = (
+  items: MenuItem[],
+  options: MenuFilterOptions = {},
+  parentPath = '',
+): MenuItem[] => {
+  return items
+    .filter((item) => item.enabled)
+    .map((item) => {
+      const menuPath = buildMenuPath(parentPath, item.name);
+      const isAllowed = isMenuAllowed(menuPath, options);
+
+      // 递归处理子菜单
+      const nextChildren = item.children?.length
+        ? filterMenuItems(item.children, options, menuPath)
+        : [];
+
+      // 分组类型：如果没有子菜单，不显示
+      if (item.type === 'group' && nextChildren.length === 0) {
+        return null;
+      }
+
+      // 当前菜单不允许访问
+      if (!isAllowed) {
+        // 但如果有允许的子菜单，仍需显示当前菜单作为容器
+        if (nextChildren.length > 0) {
+          return { ...item, children: nextChildren };
+        }
+        return null;
+      }
+
+      // 当前菜单允许访问
+      const hasChildren = (item.children?.length || 0) > 0;
+      if (!hasChildren) {
+        return item;
+      }
+
+      // 有子菜单但过滤后为空，不显示
+      if (nextChildren.length === 0) {
+        return null;
+      }
+
+      return { ...item, children: nextChildren };
+    })
+    .filter((item): item is MenuItem => Boolean(item));
+};
+
 /**
  * 判断页面的加载类型
  * 有 htmlUrl 或 jsUrls 时使用 qiankun 微应用加载
@@ -40,10 +142,13 @@ const getEntry = (page: MenuItem['page']): string | undefined => {
 export const extractRoutes = (
   items: MenuItem[],
   routes: ParsedRoute[] = [],
+  parentPath = '',
 ): ParsedRoute[] => {
   for (const item of items) {
     if (!item.enabled) continue;
 
+    const menuPath = buildMenuPath(parentPath, item.name);
+
     if (item.type === 'page' && item.page && item.page.enabled) {
       const loadType = getLoadType(item.page);
       routes.push({
@@ -57,7 +162,7 @@ export const extractRoutes = (
     }
 
     if (item.children && item.children.length > 0) {
-      extractRoutes(item.children, routes);
+      extractRoutes(item.children, routes, menuPath);
     }
   }
 

package/generators/micro-react/templates/apps/layout/src/common/request/url-resolver.ts

@@ -2,7 +2,7 @@
  * URL 解析与拼接工具
  */
 
-import { resolveProxySuffix } from './config';
+import { resolveApiBaseUrl, resolveProxySuffix } from './config';
 import type { UnifiedRequestOptions } from './types';
 
 /**
@@ -33,8 +33,12 @@ const joinProxyAndPath = (proxySuffix: string, path: string): string => {
  * 配置优先级：
  * 1. rawUrl: true → 直接返回原始 url
  * 2. 绝对 URL → 直接返回
- * 3. skipProxy: true → 返回相对路径，不拼接代理前缀
- * 4. 其他情况 → 拼接 proxySuffix + url
+ * 3. skipProxy: true → 拼接 apiBaseUrl + url（跳过 proxySuffix）
+ * 4. 其他情况 → 拼接 apiBaseUrl + proxySuffix + url
+ *
+ * 示例（testing 环境，apiBaseUrl = https://dashboard-api-test.micoplatform.com）：
+ * - 默认: /api/user/info → https://dashboard-api-test.micoplatform.com/proxy/audit_svr/api/user/info
+ * - skipProxy: /api/user/info → https://dashboard-api-test.micoplatform.com/api/user/info
  */
 export const resolveRequestUrl = (
   url: string,
@@ -50,13 +54,24 @@ export const resolveRequestUrl = (
     return url;
   }
 
-  // skipProxy: true 时不拼接代理前缀
-  if (options?.skipProxy) {
-    return url;
+  // 拼接 apiBaseUrl + proxySuffix + url
+  const apiBaseUrl = resolveApiBaseUrl();
+  // skipProxy: true 时不拼接 proxySuffix
+  const proxySuffix = options?.skipProxy
+    ? ''
+    : resolveProxySuffix(options?.proxySuffix);
+
+  if (apiBaseUrl) {
+    // 有 apiBaseUrl 时，拼接完整的绝对路径
+    const pathPart = proxySuffix ? joinProxyAndPath(proxySuffix, url) : url;
+    const normalizedBase = apiBaseUrl.endsWith('/')
+      ? apiBaseUrl.slice(0, -1)
+      : apiBaseUrl;
+    const normalizedPath = pathPart.startsWith('/') ? pathPart : `/${pathPart}`;
+    return `${normalizedBase}${normalizedPath}`;
   }
 
-  // 拼接 proxySuffix
-  const proxySuffix = resolveProxySuffix(options?.proxySuffix);
+  // 没有 apiBaseUrl 时，仅拼接 proxySuffix（相对路径）
   if (proxySuffix) {
     return joinProxyAndPath(proxySuffix, url);
   }

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/index.tsx

@@ -115,23 +115,60 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
             container,
             props: buildPropsRef.current(),
           },
-          { sandbox: { loose: true } },
+          {
+            sandbox: { loose: true },
+            // 自定义 fetch，包装原生 fetch 以便在网络层面捕获错误
+            fetch: async (url, options) => {
+              try {
+                const response = await window.fetch(url, options);
+                if (!response.ok) {
+                  throw new Error(
+                    `HTTP ${response.status}: ${response.statusText}`,
+                  );
+                }
+                return response;
+              } catch (err) {
+                // 将网络错误转换为更友好的错误信息
+                const message =
+                  err instanceof Error ? err.message : 'Network error';
+                throw new Error(`加载资源失败 (${url}): ${message}`);
+              }
+            },
+          },
         );
 
-        // 立即给 loadPromise 添加错误处理器，防止 unhandled rejection
-        // 虽然提前检查了服务可达性，但 qiankun 可能因其他原因失败（CORS、HTML 解析等）
-        microApp.loadPromise.catch((err) => {
-          console.error(`[MicroAppLoader] ${appName} loadPromise rejected:`, err);
-        });
-
         setMicroApp(appName, microApp);
 
+        // 关键：必须同时处理 loadPromise 和 bootstrapPromise/mountPromise 的错误
+        // qiankun 内部会产生多个 Promise 链，任何一个未处理的 rejection 都会导致页面崩溃
+        const handlePromiseError = (err: unknown) => {
+          if (!isCancelled) {
+            const message =
+              err instanceof Error ? err.message : 'Unknown error';
+            setError(message);
+            setLoading(false);
+          }
+        };
+
+        // 为所有 qiankun 返回的 Promise 添加错误处理器
+        microApp.loadPromise.catch(handlePromiseError);
+        microApp.bootstrapPromise.catch(handlePromiseError);
+        microApp.mountPromise.catch(handlePromiseError);
+
+        if (isCancelled) {
+          unmountApp(appName);
+          return;
+        }
+
+        // 等待加载完成，这里的错误会被上层 catch 捕获
+        await microApp.loadPromise;
+
         if (isCancelled) {
           unmountApp(appName);
           return;
         }
 
-        // mountPromise 内部会等待 loadPromise，错误会传递到 catch 块
+        // 等待挂载完成
         await microApp.mountPromise;
 
         if (!isCancelled) {
@@ -140,7 +177,12 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
         }
       } catch (err) {
         if (!isCancelled) {
-          setError(err instanceof Error ? err.message : 'Unknown error');
+          const message = err instanceof Error ? err.message : 'Unknown error';
+          // 提取更友好的错误信息
+          const friendlyMessage = message.includes('Failed to fetch')
+            ? '无法连接到子应用服务，请检查子应用是否已启动'
+            : message;
+          setError(friendlyMessage);
           setLoading(false);
         }
       }

package/generators/micro-react/templates/apps/layout/src/global.less

@@ -1,5 +1,9 @@
 // ==================== 全局样式 ====================
-// 导入共享主题变量（CSS Variables + Less Variables）
+// 先导入 Arco Design CSS（确保它在项目样式之前）
+@import (css) '~@arco-design/web-react/dist/css/arco.css';
+
+// 再导入共享主题变量（CSS Variables + Less Variables）
+// 这样项目的变量定义会在 Arco 之后，可以正确覆盖
 @import '<%= packageScope %>/shared-styles';
 
 * {

package/generators/micro-react/templates/apps/layout/src/layouts/components/menu/index.tsx

@@ -1,10 +1,11 @@
 import type { ParsedMenuItem } from '@/common/menu';
-import { getWindowMenus, parseMenuItems } from '@/common/menu';
+import { filterMenuItems, getWindowMenus, parseMenuItems } from '@/common/menu';
 import IconFont from '@/components/IconFont';
 import { useMenuState } from '@/hooks/useMenuState';
 import { useTheme } from '@/hooks/useTheme';
 import { Layout, Menu } from '@arco-design/web-react';
 import * as Icons from '@arco-design/web-react/icon';
+import { useModel } from '@umijs/max';
 import React, { useEffect, useMemo, useRef } from 'react';
 import './index.less';
 
@@ -103,11 +104,18 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
   const siderRef = useRef<HTMLDivElement>(null);
   const { isDark } = useTheme();
 
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
+
   // Parse menu data
   const menuItems = useMemo(() => {
     const menus = getWindowMenus();
-    return parseMenuItems(menus);
-  }, []);
+    const filteredMenus = filterMenuItems(menus, {
+      isSuperuser: currentUser?.is_superuser,
+      sideMenus: (currentUser?.side_menus || []) as string[],
+    });
+    return parseMenuItems(filteredMenus);
+  }, [currentUser?.is_superuser, currentUser?.side_menus]);
 
   // 使用菜单状态 Hook
   const {

package/generators/micro-react/templates/apps/layout/src/layouts/index.tsx

@@ -1,10 +1,11 @@
 import { layoutLogger } from '@/common/logger';
-import { extractRoutes, findRouteByPath, getWindowMenus } from '@/common/menu';
+import { extractRoutes, filterMenuItems, findRouteByPath, getWindowMenus } from '@/common/menu';
 import AppTabs from '@/components/AppTabs';
 import MicroAppLoader from '@/components/MicroAppLoader';
 import { NO_AUTH_ROUTE_LIST } from '@/constants';
+import ForbiddenPage from '@/pages/403';
 import { Layout, Spin } from '@arco-design/web-react';
-import { Outlet, useLocation } from '@umijs/max';
+import { Outlet, useLocation, useModel } from '@umijs/max';
 import React, { Suspense, useMemo } from 'react';
 import LayoutHeader from './components/header';
 import LayoutMenu from './components/menu';
@@ -38,17 +39,55 @@ const getAppNameFromEntry = (entry: string): string => {
  */
 const BasicLayout: React.FC = () => {
   const location = useLocation();
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
 
-  // 解析路由配置
-  const routes = useMemo(() => {
+  const filterOptions = useMemo(
+    () => ({
+      isSuperuser: currentUser?.is_superuser,
+      sideMenus: (currentUser?.side_menus || []) as string[],
+    }),
+    [currentUser?.is_superuser, currentUser?.side_menus],
+  );
+  // 所有路由（不过滤权限，用于判断路径是否存在）
+  const allRoutes = useMemo(() => {
     const menus = getWindowMenus();
     return extractRoutes(menus);
   }, []);
 
-  // 查找当前路由配置
+  // 有权限的路由
+  const allowedRoutes = useMemo(() => {
+    const menus = getWindowMenus();
+    const filteredMenus = filterMenuItems(menus, filterOptions);
+    return extractRoutes(filteredMenus);
+  }, [filterOptions]);
+
+  // 查找当前路由配置（优先从有权限的路由中查找）
   const currentRoute = useMemo(() => {
-    return findRouteByPath(routes, location.pathname);
-  }, [routes, location.pathname]);
+    return findRouteByPath(allowedRoutes, location.pathname);
+  }, [allowedRoutes, location.pathname]);
+
+  // 判断是否是动态路由但无权限
+  const isForbidden = useMemo(() => {
+    // 如果在有权限的路由中找到了，说明有权限
+    if (currentRoute) return false;
+    // 如果在所有路由中也找不到，说明不是动态路由，交给 Umi 处理
+    const routeInAll = findRouteByPath(allRoutes, location.pathname);
+    // 在所有路由中存在，但在有权限的路由中不存在 → 无权限
+    const forbidden = !!routeInAll;
+
+    layoutLogger.log('isForbidden check:', {
+      pathname: location.pathname,
+      currentRoute,
+      routeInAll,
+      forbidden,
+      allRoutesCount: allRoutes.length,
+      allowedRoutesCount: allowedRoutes.length,
+      filterOptions,
+    });
+
+    return forbidden;
+  }, [currentRoute, allRoutes, allowedRoutes, location.pathname, filterOptions]);
 
   // 判断是否需要显示布局
   const showLayout = !NO_AUTH_ROUTE_LIST.includes(location.pathname);
@@ -58,9 +97,14 @@ const BasicLayout: React.FC = () => {
     layoutLogger.log('renderContent:', {
       pathname: location.pathname,
       currentRoute,
-      routes,
+      isForbidden,
     });
 
+    // 无权限，显示 403
+    if (isForbidden) {
+      return <ForbiddenPage />;
+    }
+
     // 如果有匹配的动态路由配置且需要加载微应用
     if (currentRoute?.loadType === 'microapp' && currentRoute.entry) {
       layoutLogger.log('Loading microapp:', currentRoute);

package/generators/micro-react/templates/apps/layout/src/pages/403/index.tsx

@@ -0,0 +1,28 @@
+import { Button, Result } from '@arco-design/web-react';
+import { history } from '@umijs/max';
+import React from 'react';
+
+const ForbiddenPage: React.FC = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      minHeight: 400,
+    }}>
+      <Result
+        status="403"
+        title="无权限访问"
+        subTitle="抱歉，您没有权限访问此页面"
+        extra={
+          <Button type="primary" onClick={() => history.push('/')}>
+            返回首页
+          </Button>
+        }
+      />
+    </div>
+  );
+};
+
+export default ForbiddenPage;

package/generators/micro-react/templates/apps/layout/src/pages/User/Login/index.tsx

@@ -1,6 +1,6 @@
 import { Button, Form, Input, Message, Space, Typography } from '@arco-design/web-react';
 import { IconLock, IconUser } from '@arco-design/web-react/icon';
-import { useLocation, useNavigate } from '@umijs/max';
+import { useLocation, useModel,useNavigate } from '@umijs/max';
 import React, { useCallback, useMemo, useState } from 'react';
 import { loginStaff } from '@/services/auth';
 import { maybePersistTokens } from '@/common/auth/auth-manager';
@@ -18,6 +18,8 @@ const LoginPage: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [form] = Form.useForm<LoginFormValues>();
+  const { refresh } = useModel('@@initialState');
+
 
   const redirectPath = useMemo(() => {
     const params = new URLSearchParams(location.search);
@@ -39,6 +41,8 @@ const LoginPage: React.FC = () => {
         if (response?.code === 200) {
           maybePersistTokens(response);
           Message.success('登录成功');
+          // 刷新 initialState，获取用户信息
+          await refresh();
           navigate(redirectPath, { replace: true });
           return;
         }
@@ -50,7 +54,7 @@ const LoginPage: React.FC = () => {
         setLoading(false);
       }
     },
-    [navigate, redirectPath],
+    [navigate, redirectPath, refresh],
   );
 
   return (

package/generators/subapp-react/templates/homepage/config/config.prod.ts

@@ -4,8 +4,8 @@ import { defineConfig } from '@umijs/max';
 const { CDN_PUBLIC_PATH } = process.env;
 
 const PUBLIC_PATH: string = CDN_PUBLIC_PATH
-? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/') }homepage/`
-: '/homepage/';
+? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/') }<%= appName %>/`
+: '/<%= appName %>/';
 
 const config: ReturnType<typeof defineConfig> = {
   // 生产环境：将所有代码打包到一个文件

package/generators/subapp-react/templates/homepage/config/config.ts

@@ -30,6 +30,12 @@ const config: ReturnType<typeof defineConfig> = {
 
   publicPath: PUBLIC_PATH,
 
+  /**
+   * @name 运行时公共路径
+   * @description qiankun 微应用运行时动态设置 publicPath
+   */
+  runtimePublicPath: {},
+
   /**
    * @name 路由配置
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.1.29",
+  "version": "0.2.1",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": [
     "yeoman-generator",