一:樹(shù)形結(jié)構(gòu)---權(quán)限樹(shù)顯示節(jié)點(diǎn)(設(shè)置權(quán)限頁(yè)):
同時(shí)樹(shù)形結(jié)構(gòu)的相互關(guān)聯(lián)敲街,導(dǎo)致父節(jié)點(diǎn)的key一旦返回闷愤,子節(jié)點(diǎn)便會(huì)全部選中砌创。所以這里用一個(gè)數(shù)組halfSelectKeys去裝所有的父節(jié)點(diǎn)疼燥,返回選中的數(shù)據(jù)減去所有父節(jié)點(diǎn)沧卢。這樣渲染時(shí)就是通過(guò)子節(jié)點(diǎn)是否全部選中,去關(guān)聯(lián)父節(jié)點(diǎn)是否選上醉者。(子節(jié)點(diǎn)如果全部選中但狭,就算沒(méi)有數(shù)據(jù)里父節(jié)點(diǎn)的值披诗,父節(jié)點(diǎn)也會(huì)勾選上)。
二:點(diǎn)確定提交時(shí)立磁,將halfSelectKeys和選中節(jié)點(diǎn)數(shù)的據(jù)合集呈队,并去重,作為參數(shù)傳遞唱歧。有兩種情況:
1無(wú)變更點(diǎn)確定掂咒。則是【返回?cái)?shù)據(jù)父節(jié)點(diǎn)值的數(shù)組】和【返回?cái)?shù)據(jù)選中子節(jié)點(diǎn)值的數(shù)組】合集傳遞即可。
2有變更點(diǎn)確定迈喉。在節(jié)點(diǎn)onCheck事件中可以拿到所有【半選中節(jié)點(diǎn)數(shù)組】和【已選中節(jié)點(diǎn)數(shù)組】绍刮,也可以在提交的時(shí)候取合集。
三:用戶登錄時(shí)顯示自己的菜單路由挨摸。
1孩革,在登錄時(shí),會(huì)返回用戶權(quán)限id數(shù)組得运,去匹配接口數(shù)據(jù)(全部路由的樹(shù)形結(jié)構(gòu)膝蜈,有id和path路由等參數(shù)),將有權(quán)限的路由path數(shù)組存儲(chǔ)在sessionStorage中熔掺。并刷新頁(yè)面(如不刷新饱搏,存儲(chǔ)的路由數(shù)據(jù)不會(huì)更新)
更新:將有權(quán)限的路由path數(shù)組存儲(chǔ)在狀態(tài)管理store中,sessionStorage可被用戶更改置逻。
2推沸,在app.jsx中的modifyRoutes方法中拿到本地全部路由,并匹配store中的路徑券坞,重新 return 新的有權(quán)限的路由鬓催。注意路由的模糊匹配寫(xiě)精確路由的后面,會(huì)先匹配精確路由恨锚,后匹配模糊路由宇驾。
3课舍,在菜單級(jí)別也要過(guò)濾一下,匹配store中的路徑他挎,展示有權(quán)限的菜單筝尾。
四,按鈕權(quán)限封裝雇盖。
1忿等,約定每個(gè)模塊下的按鈕通用名字:查詢(query),新增(add),詳情(detail),編輯(edit)崔挖,刪除(delete)贸街,導(dǎo)入(import)庵寞,導(dǎo)出(export)。其他特殊按鈕自定義名稱薛匪。
2捐川,路由改動(dòng),之前的重定向路由邏輯是:找第一個(gè)children下的最深層children為空的path∫菁猓現(xiàn)加了按鈕權(quán)限古沥,最深層的children為按鈕級(jí)別,所以需要修改重定向路由的方法:加上判斷娇跟,如children不為空岩齿,且children里的path包括'/',則繼續(xù)遞歸苞俘,否則判定為重定向路由盹沈。(因?yàn)榧s定按鈕權(quán)限的名稱不包括'/')
3,按鈕權(quán)限組件封裝邏輯吃谣。
(1)pathName為當(dāng)前頁(yè)面路由(如:/production_scheduling/basic_info/enterprise)乞封,pathName與store中存儲(chǔ)的路由相比較,遞歸直到找到完全一致的路由岗憋,得到其children(如:['query','add', 'edit', 'delete'])肃晚,并賦值為authBtnList。
(2)外層調(diào)用時(shí)仔戈,按鈕權(quán)限組件需包裹按鈕关串,并將此按鈕的type傳入。(如新增則傳入add)
(3)判斷authBtnList中是否含有type杂穷,如有則加載其組件悍缠。