如何设计高可用的skill菜单系统：从架构到实现

4次阅读

没有评论

共计 2281 个字符，预计需要花费 6 分钟才能阅读完成。

在复杂的业务系统中，skill 菜单作为用户交互的核心入口，常常面临三大挑战：

动态加载问题：传统方案往往在用户登录时全量加载菜单数据，当菜单层级深、数量大时，首屏加载延迟明显
权限控制僵化：菜单与权限硬编码绑定，每次调整权限都需要重新部署，无法满足快速变化的业务需求
高并发瓶颈：集中式菜单服务在流量高峰时容易成为性能瓶颈，导致系统响应缓慢

前端控制：
优点：减轻服务器压力，动态渲染灵活
缺点：安全性依赖前端实现，权限校验容易被绕过
后端控制：
优点：权限校验可靠，数据一致性高
缺点：服务器压力集中，响应速度受网络影响

实际采用 混合模式：关键权限校验在后端，菜单渲染逻辑在前端。

RESTful：
适合简单菜单结构
但存在多次请求问题（菜单 + 子菜单）
GraphQL：
按需获取字段
单次请求获取完整菜单树

最终选择 RESTful+ 字段过滤 方案，平衡实现复杂度和灵活性。

采用改进的 RBAC 模型，实现四层解耦：

用户 - 角色：支持多角色继承
角色 - 权限：动态绑定权限点
权限 - 菜单：菜单可见性规则配置化
菜单 - 操作：每个菜单项关联的 API 权限

// 权限校验核心逻辑
@PreAuthorize("hasPermission(#menuId,'MENU_ACCESS')")
public MenuDTO getMenuTree(String menuId) {// 实现逻辑}

构建三级缓存体系：

CDN 缓存：静态菜单配置（24 小时）
Redis 集群：
热数据缓存（5 分钟）
采用 Hash 结构存储菜单树
本地 Caffeine 缓存：
用户级菜单缓存（1 分钟）
解决 ” 缓存穿透 ” 问题

// 缓存加载示例
@Cacheable(value = "menuTree", key = "#userId")
public MenuTree getUserMenu(String userId) {// 数据库查询逻辑}

实现方案：

首屏只加载一级菜单
通过 WebSocket 推送菜单更新
子菜单按需加载（滚动触发）

前端实现伪代码：

function lazyLoadMenu(parentId) {return fetch(`/api/menu/children?parent=${parentId}`)
    .then(res => res.json())
}

@RestController
@RequestMapping("/api/menu")
public class MenuController {

    @Autowired
    private MenuService menuService;

    /**
     * 获取用户菜单树
     * @param flatten 是否展平结构
     */
    @GetMapping("/tree")
    public Response<MenuTree> getMenuTree(@RequestParam(defaultValue = "false") boolean flatten) {String userId = SecurityContext.getCurrentUserId();
        return Response.success(menuService.buildUserMenuTree(userId, flatten)
        );
    }

    // 菜单更新事件处理
    @TransactionalEventListener
    public void handleMenuUpdate(MenuUpdateEvent event) {cacheManager.evict("menuTree::" + event.getUserId());
        websocketSender.sendMenuUpdate(event.getUserId());
    }
}

spring:
  redis:
    host: redis-cluster
    timeout: 3000
  cache:
    type: redis
    redis:
      time-to-live: 300000 # 5 分钟
      cache-null-values: false

# Caffeine 本地缓存
caffeine:
  spec: maximumSize=500,expireAfterWrite=60s