這是產(chǎn)品提出的要求：

頁面上的每一個按鈕，都要可以通過角色權限來控制

當時的項目背景是一個零售系統(tǒng)的后臺管理，所以會涉及到運營、廠家、管理員等等很多角色的使用，而其中許多數(shù)據(jù)是敏感的，例如銷量，單價，利潤等。前期的權限僅限于菜單級別的控制，也就是可以通過配置實現(xiàn)可以控制某個角色只顯示某些菜單，這也是比較常規(guī)的權限處理方案——沒權限就不讓你看那個頁面唄~

舊的按鈕權限控制:

//按鈕根據(jù)角色寫死是否有權限，靈活性很差，修改權限需要前端改代碼，而且哪個按鈕有權限純靠閱讀代碼識別
<button disabled={role !== "admin"}>刪除</button> //大致代碼，角色為admin按鈕才可用

但目前的情況是菜單的控制在現(xiàn)有系統(tǒng)的背景下已經(jīng)略顯粗放了，比如有的人是可以看銷售頁面的，只是不允許他導出，又或者允許他新增一個商品，但是不允許他刪除，所以呢要求雖然有點高，但是這個需求無疑是合理的。做過類似系統(tǒng)的朋友都應該了解，后管系統(tǒng)的列表類型頁面，往往是增刪改查集一體的，甚至還有導出、綁定、上傳之類的操作。另一個前提是，實現(xiàn)按鈕權限控制的同時之前菜單權限的控制也要保留支持。

解決方案構思：

方案一，既然某些操作是不允許的，是否可以將操作歸類統(tǒng)一賦予角色權限呢，比如運營A角色無刪除類權限，運營B角色有新增類權限，類似來歸類實現(xiàn)管理。可落到實處，會發(fā)現(xiàn)操作很難歸類，刪除和修改其實是類似的，綁定解綁等操作更是無法準確分類；更大的問題是，有的角色是可以的刪除A頁面數(shù)據(jù)，但是不允許刪除B頁面數(shù)據(jù)的，而且這種方式靈活度也很低，比菜單好不到哪去，所以否掉。

方案二，摒棄按鈕分類思想，給每個按鈕賦予唯一code用于控制權限，管理角色權限直接勾選該角色是否激活某個code權限即可；擬定一個鑒權函數(shù)，入?yún)?shù)為code，該函數(shù)放置于每個按鈕中，鑒權函數(shù)根據(jù)code是否在后端返回的該角色擁有code列表中，來判斷返回是否具有權限，具有很高的靈活性，并且菜單也可以通過加code來實現(xiàn)同樣效果，改動微小幾乎只用增加一個鑒權函數(shù)即可實現(xiàn)核心邏輯。

方案優(yōu)化

最終采用方案二，在實際研發(fā)中，還做了優(yōu)化：

1.將權限控制按層級分為模塊，菜單，按鈕3大層級，因為當整個模塊都沒有權限的時候，不必再判斷按鈕權限，提高性能，菜單亦如此。

2.code實際是用英文字符來表示，增強可讀性，例如設備菜單是deviceMenu，而不是無意義的id。

3.實際鑒權函數(shù)入?yún)槟K，菜單，按鈕3個參數(shù)，更好理解也更加符合直覺，模塊下有多個菜單，菜單下有多個按鈕，也就是說幾乎每個添加按鈕都可以取名“add”，不必擔心重復。

4.將列表字段當按鈕處理，甚至可以實現(xiàn)同一列表每個字段的權限控制，例如部分敏感價格字段顯示為**（當然安全性不高）

5.后端只需返回當前用戶角色擁有的全部模塊，菜單，按鈕code即可

具體實現(xiàn)核心代碼

// 給菜單路由增加code標識,后續(xù)根據(jù)角色擁有菜單情況遍歷剔除無權限菜單即可
    	{
    		path: 'model',
    		name: 'DeviceModelList',
    		code: 'device_model',//  菜單僅在原路由增加code，改動很小
    		meta: {
    			title: '設備型號',
    			icon: 'md-menu'
    		},
    		component: () => import('@/views/DeviceModelList')
    	}

// 給按鈕增加函數(shù)鑒權，此處是采用禁用點擊，也可以使用if直接不顯示
    <Button:disabled="!checkButtonPower('device','device_list','add')">添加設備</Button>

// 鑒權函數(shù)，判斷模塊和菜單就不用傳第二，三個參數(shù)即可（當時的代碼實在是不夠優(yōu)雅?。?
    checkButtonPower(modelCode, menuCode, buttonCode) {
    let powerStatus = false
    //取出權限列表
    const isGetPower = localStorage.getItem('userPower')
    const powerList = isGetPower ? base64.decryptAsObj(isGetPower) : null
    for (const modes of powerList) {
    	if (!!modes.menuCode && modes.menuCode == modelCode) {
    		for (const menus of modes.childMenu) {
    			if (!!menus.menuCode && menus.menuCode == menuCode) {
    				for (const buttons of menus.buttons) {
    					if (!!buttons.code && buttons.code == buttonCode) {
    						powerStatus = true
    					}
    				}
    			}
    		}
    	}
   	}
   	return powerStatus
   },

至此，功能實現(xiàn)，如有疑問歡迎留言 PS:后續(xù)實現(xiàn)后發(fā)現(xiàn)Vben-admin也是用的類似的思路實現(xiàn)了細粒度的權限管理，思路沒錯~~

更多關于按鈕級別前端權限管理的資料請關注腳本之家其它相關文章！

最新評論