Routing & Menu System

Tổng quan

Hệ thống routing sử dụng 1 config file duy nhất — routes.config.ts trong Container. File này là source of truth cho:

1. React Router routes — Container tự tạo <Route> từ config
2. Sidebar menu — Menu items tự động generate từ config
3. Permissions — Mỗi route có cấu hình phân quyền riêng

Cấu trúc RouteConfig

interface RouteConfig {
  path: string; // URL path
  mfeKey: string; // Key trong MFE_REGISTRY
  permission: RoutePermission;
  menu?: MenuItemConfig; // Nếu có → hiển thị trên sidebar
  children?: RouteConfig[]; // Sub-routes (menu lồng nhau)
}

thông tin

children chỉ dùng cho menu grouping — không tạo nested React Routes. MFE tự xử lý sub-routing nội bộ.

Ví dụ config

{
  path: "/inventory",
  mfeKey: "inventory",
  permission: { requiredModule: null },
  menu: {
    id: "inventory",
    label: "Hàng hóa & kho",
    icon: IoCubeOutline,
    order: 10,
  },
  children: [
    {
      path: "/inventory/products",
      mfeKey: "inventory",
      permission: {
        requiredModule: MODULE_KEYS.PRODUCTS,
        excludeRoles: [ROLES.SUPER_ADMIN],
      },
      menu: {
        id: "inventory-products",
        label: "Hàng hóa",
        icon: IoCubeOutline,
        order: 1,
        parentId: "inventory",
      },
    },
  ],
}

Luồng routing

Thêm route mới

1. Thêm entry vào ROUTES_CONFIG trong routes.config.ts
2. Nếu là MFE mới → thêm vào MFE_REGISTRY trong mfeRegistry.ts
3. MFE tự xử lý sub-routes nội bộ
4. Menu sidebar tự động cập nhật theo config

Sidebar menu

Menu sidebar được auto-generate từ ROUTES_CONFIG:

• Chỉ hiển thị routes có menu config
• Ẩn routes có menu.hidden: true
• Nhóm theo parentId
• Sắp xếp theo order
• Filter theo permission của user hiện tại