# 菜單由接口下發時，前端權限怎麼守

後臺菜單的分組、層級、外鏈與打開方式，配合權限碼過濾菜單、守衛路由與按鈕。

> Runlume 提供平臺能力、獨立業務應用與專業服務，支持按需組合。功能、額度與交付範圍由所選套餐或服務約定確定；業務應用可獨立選用，跨應用協作遵循接入配置與授權邊界。

原始頁面: https://runlume.app/zh-hant/blog/admin-design-menu-and-permissions

開發者指南 · 動態菜單 / 權限 / 應用接入

發佈：2026-09-17 · 作者：Runlume 團隊

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

## 菜單契約

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

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

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

## 路由只認已註冊的頁面

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

## 三處一起生效

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

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

## 相關頁面

- [平臺能力](https://runlume.app/zh-hant/platform)
- [業務應用](https://runlume.app/zh-hant/apps)
- [開發者](https://runlume.app/zh-hant/developers)
- [關於 Runlume](https://runlume.app/zh-hant/about)