本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫
前言
本文是繼 前端如何一鍵生成多維度數據可視化分析報表 實戰的最後一篇文章, 主要介紹如何實現後臺管理系統的權限路由和權限菜單. 希望通過這3篇文章的復盤和實戰, 可以讓大家開發企業應用的時候更加遊刃有餘.
本文主要涉及的技術點如下:
如何使用遞歸算法動態渲染不定層級的菜單如何基於權限來控制菜單展現基於nodejs的權限服務設計正文
動態菜單和權限路由是後臺管理系統設計中必不可少的環節, 作為複雜後臺管理系統來說, 導航菜單往往不是簡單的一級菜單, 往往都會有3級,4級菜單, 如下:
所以我們首要解決的問題就是面對未知層級菜單時的前端解決方案. 其次就是面對不同角色,需要展示不同的權限菜單, 我們如何解決這兩個問題, 是實現權限菜單的第一步,接下來筆者就會帶大家一起實現.
使用遞歸算法動態渲染不定層級的菜單
首先我們來解決第一個問題, 實現渲染不定層級的菜單. 我們目前常用的菜單schema如下:
const menuData = [{ key: '/manage', path: '/manage', text: 'dooring工作檯', }, { key: '/manage/anazly', path: '/manage/anazly', text: '數據大盤', }, { key: '/manage/h5', text: 'H5服務中心', sub: [ { key: '/manage/h5/config', path: '/manage/h5/config', text: 'H5頁面管理', }, { key: '/manage/h5/tpl', path: '/manage/h5/tpl', text: '模板庫', } ] }, { key: '/manage/order', path: '/manage/order', text: '訂單管理', }]
複製代碼
我們可以通過實現一個js算法來遍歷這個數據生成動態菜單, 比如for, 遞歸等, 筆者這裡採用遞歸來實現, 關於菜單組件的選擇, 我們可以使用antd的Menu, 也可以使用element UI, iView等, 原理基本一致, 這裡筆者直接寫出我的javascript遞歸版本:
const { SubMenu } = Menu;const createMenu = (menu = []) => {return menu.map(item => { if(item.sub) { return <SubMenu key={item.key} title={item.text}> { createMenu(item.sub) } </SubMenu> }else { return <Menu.Item key={item.key}> <Link to={item.path}>{ item.text }</Link> </Menu.Item> } }) }
複製代碼
通過以上方式我們就可以渲染出任何層級的菜單了, 在H5-Dooring後臺中效果如下:
如果沒有權限需求, 大家可以直接用以上方案實現任何動態層級菜單. 接下來我們來實現具有權限功能的動態菜單.
基於權限來控制菜單展現
在上面的實現中我們已經實現了動態層級菜單, 對於有權限管理功能的系統, 我們需要對不同用戶展現不同菜單, 比如超級管理員, 普通管理員, 或者更細的劃分, 我們需要在遍歷菜單的時候去動態根據權限過濾, 接下來我們看一個例子: 超級管理員登錄的菜單界面:
普通管理員登錄的菜單界面:
首先要想實現權限菜單, 我們需要修改菜單schema結構, 添加權限欄位,如下:
const menuData = [{ key: '/manage', path: '/manage', text: 'dooring工作檯' }, { key: '/manage/anazly', path: '/manage/anazly', text: '數據大盤', }, { key: '/manage/auth', path: '/manage/auth', text: '會員管理', auth: true, }, { key: '/manage/h5', text: 'H5服務中心', sub: [ { key: '/manage/h5/config', path: '/manage/h5/config', text: 'H5頁面管理', }, { key: '/manage/h5/tpl', path: '/manage/h5/tpl', text: '模板庫', auth: true, } ] }]
複製代碼
上圖可知我們添加了auth欄位作為權限標示, 這裡我們主要用true和false表示, 因為這裡只有2中角色, 如果有多種權限, 我們可以用特殊字符串或者數字表示, 這塊只需要和後端約定好即可. 具體實現如下:
const createMenu = (menu = []) => {return menu.map(item => { if(item.sub) { return <SubMenu key={item.key} title={item.text}> { createMenu(item.sub) } </SubMenu> }else { if((rp === 'super' && item.auth) || !item.auth) { return <Menu.Item key={item.key} icon={iconMap[item.icon]}> <Link to={item.path}>{ item.text }</Link> </Menu.Item> }else { return null } } }) }
複製代碼
以上就實現了動態不限層級的權限菜單. 大家可以直接食用哈~
基於nodejs的權限服務設計
以上實現主要是前端層面的設計方案, 我們都知道前端的安全措施永遠是不可靠的, 所以我們為了保證系統的安全性, 一般我們會把菜單數據存到後端, 通過接口動態請求權限菜單. 這塊我們可以提前和後端做好約定, 讓後端根據不同用戶返回不同的權限菜單schema即可. 由於方案比較簡單, 這裡筆者就不一一介紹了. 感興趣可以在參考H5-Dooring的實現.
所以, 今天你又博學了嗎?