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

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

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

舊的按鈕權(quán)限控制:

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

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

解決方案構(gòu)思：

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

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

方案優(yōu)化

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

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

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

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

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

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

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

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

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

// 鑒權(quán)函數(shù)，判斷模塊和菜單就不用傳第二，三個參數(shù)即可（當時的代碼實在是不夠優(yōu)雅啊）
    checkButtonPower(modelCode, menuCode, buttonCode) {
    let powerStatus = false
    //取出權(quán)限列表
    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)了細粒度的權(quán)限管理，思路沒錯~~

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