Umi、React下的前端權限控制最佳實踐，顆粒程度組件級。

前言

想設計一種前端權限方案，靈活可控，解偶獨立，顆粒程度可達到組件級。

方案設計

• 抽象一種權限的概念，對於前端每個組件都可以抽象成，用戶擁有的一種權限。一種權限對應唯一的key
• 對於組件可抽象分爲（1）基礎組件（控制渲染不渲染）(2)多是視圖的Tab層組件（控制那個子tab不顯示）
• 設計權限包裹組件,通過當前角色擁有的的權限Key,通過權限包裹組件，來判斷組件是渲染還是禁用的其他狀態。
• 菜單權限的控制：umi 下的路由支持 ，access抽象權限，這裏access我們可以抽象成，權限key,通過判斷角色key,來自動過濾菜單

方案總覽如下：

權限數據結構設計

權限key:

視圖權限的數據結構嵌套

*成果

最終可達到用戶權限編輯功能，可達到組件級，完全解藕，所有能看見的都能抽象成權限。通過扁平化的key 管理權限