摘要
运营后台菜单需要根据账号角色动态展示，固定写死侧边菜单会导致新增功能必须前端发版。本文设计后端返回菜单树、前端递归渲染的动态菜单方案，菜单节点绑定权限编码，无权限节点自动隐藏，bidfans 后台全部侧边菜单采用该实现方式。
一、静态菜单开发痛点
前端代码硬编码侧边菜单，新增入库、打包等功能菜单时，必须修改前端路由文件重新打包部署，迭代周期长；超级管理员、仓储、财务共用一套菜单，无权限菜单全部展示，界面杂乱，操作人员容易误点无权限功能；菜单层级固定，无法根据业务调整二级、三级分类，页面扩展性差；菜单与权限分开维护，新增菜单容易忘记绑定权限编码，出现越权访问漏洞。
二、后端菜单树形数据结构设计
后台菜单数据表存储父子层级关联，字段包含菜单 ID、父级 ID、菜单名称、图标、路由地址、绑定权限编码、排序权重。一级菜单如订单管理、仓库管理，二级菜单如待打包、商品入库，三级菜单为细分操作页面。
用户登录后，后端根据当前角色过滤出拥有权限的菜单节点，递归组装树形数组返回前端，过滤后不存在无权限菜单数据，前端无需额外做过滤判断。排序权重数字越小展示越靠前，后台可视化拖拽调整排序，无需修改代码。
三、前端递归渲染树形菜单
前端接收后端树形数组，通过递归组件循环渲染一级、二级、三级菜单，自动生成折叠展开侧边栏。菜单路由地址与页面路由一一对应，点击菜单直接跳转对应页面；无三级子菜单的节点直接渲染可点击入口，存在子节点默认折叠，点击展开下级菜单。菜单图标字段由后端返回，新增功能可后台上传图标配置，前端无需新增图标资源。
切换账号角色时，重新请求菜单接口，侧边栏实时刷新，无需刷新页面，不同操作人员看到完全匹配自身岗位的功能菜单。
四、菜单操作日志联动
所有菜单点击操作埋点日志，记录操作人员、访问菜单、操作时间，后台可统计各功能访问频次，优化常用菜单展示权重；长期无人访问的冗余菜单可后台隐藏，简化操作界面。新增后台功能仅需在后台菜单管理页面新增节点、绑定对应角色权限，前端零改动即时生效。
bidfans 使用动态菜单方案后，后台功能新增无需前端发版，菜单维护人力成本下降 70%，界面整洁度提升，误操作工单数量减少。
结语
后端树形菜单 + 前端递归渲染的动态侧边栏方案，将菜单维护完全交由运营可视化配置，自动按角色过滤权限节点，解决静态菜单迭代繁琐、界面杂乱问题，是多角色后台管理系统通用优化方案。
