後臺菜單常常由服務端下發：不同角色看到的入口不同，新增頁面也不必重新發版。前端要做的不是“照著渲染”，而是把菜單、路由與按鈕三處的權限收緊到同一套規則。

菜單契約

菜單按“分組 + 條目”下發。條目裡帶路徑、文案（或文案 key）、圖標、所屬分組、排序、隱藏標記、權限碼與子菜單；分組決定側欄順序，層級上限四層，避免接口返回的病態嵌套把側欄撐爆。

外鏈條目單獨聲明地址與打開方式：新窗口、當前窗口或內嵌。內嵌只對允許被內嵌的站點有效——對方發了 X-Frame-Options: DENY 時，嵌進去只會是空白。

容錯也要放在前端：異常路徑、未知圖標、超出層級的子項都會被規整，並留下可讀的警告清單。接真實接口時先看這份清單，而不是等用戶報錯。

路由只認已註冊的頁面

動態路由的組件來自本地註冊表：接口只能引用已註冊的頁面，不能靠下發的數據新增代碼。未登錄或沒有權限的地址會落到登錄頁或 403，而不是白屏。

三處一起生效

  • 菜單：按權限碼過濾可見條目，沒有權限的入口不顯示。
  • 路由：直接敲 URL 進來的同樣會被攔下，落到 403。
  • 按鈕：<Can permission="customer:create"> 控制新建、導出這類操作，無權限時給出禁用態而不是靜默失敗。

權限碼支持 *（全部）、module:*（模塊內全部）與精確匹配三種寫法，角色差異可以用一份清單表達。文檔站的「動態菜單與權限」專題列出了完整契約；在線演示裡可以用兩個測試賬號對比：同一個地址，管理員能看到操作日誌，測試賬號落 403。