背景需求：ERP系統(tǒng)需增加 ”按鈕權(quán)限控制“ 功能，對權(quán)限的控制粒度要普及到按鈕層級。
預(yù)期
按鈕權(quán)限控制的交互方式無非兩種："不可見" 和 "可見不可點"。
不可見
不可見的交互方式相對簡單，我們可使用 v-if 控制其是否顯示。使用 v-show 也行，但不夠保險，畢竟 v-show 只是把樣式改成 display: none，在真實的 DOM 渲染還是存在的，所以更推薦 v-if 來控制不可見。
可見不可點
“看是能看了，但你不行了”。
- 樣式控制（得加個禁用樣式），什么 cursor: not-allowed ，置灰之類的云云；
- 不可點擊，即要禁用或屏蔽點擊事件，好像有 preventDefault/stopProgration 可實現(xiàn)；
最終產(chǎn)品需求選擇了 “可見不可點”，原因可能就覺得不可見太簡單了。(¬_¬)
思路探索
- 給按鈕點擊事件的回調(diào)函數(shù)，加個包裝函數(shù)，對其權(quán)限控制，進行事件攔截與觸發(fā)。相當是做了個代理，有點高階組件那意思（但對現(xiàn)有業(yè)務(wù)改動太大，得對每個@click綁定函數(shù)逐個修改，遂放棄該方案）；
- 阻止按鈕點擊事件冒泡與觸發(fā)，貌似能用上 preventDefautl/stopProgration, 感覺能用指令的方式對 DOM 元素進行事件監(jiān)聽，允許的話則讓事件正常執(zhí)行，不允許則攔截屏蔽；
實踐方案
最終選擇了指令的方式，最小成本擴展，避免改動現(xiàn)有業(yè)務(wù)代碼邏輯。
針對權(quán)限控制需做點擊劫持的元素：
- el-button
- btn-wrapper（自封裝組件）
- div/span/a 等標簽
具體實現(xiàn)方案請看下文：
權(quán)限入口：Vuex 控制，全局使用
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 用戶登陸后，獲取該用戶權(quán)限 CODE 碼，并存儲至 storethis.$store.commit('SET_AUTH_CODE', authCodeList);SET_AUTH_CODE: (state, acthCode) => { if (acthCode) { state.autoCodeList = acthCode; } setStore({ name: 'autoCodeList', content: state.autoCodeList || [], });} |
定義權(quán)限指令
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const disableClickFn = (event) => { event && event.stopImmediatePropagation();}export const hasPermission = () => { Vue.directive('permission', { bind(el, binding) { let disalbe = true; if (autoCodeList.length && autoCodeList.includes(binding.value)) { disable = false; } if (disable) { el.classList.add('permission-disabled'); el.setAttribute('disabled', 'disabled'); el.addEventListener('click', disableClickFn, true); } }, unbind(el) { el.removeEventListener('click', disableClickFn); } });}; |
- 首先 addEventListener 第三個參數(shù)我們使用 useCapture 為 true 讓其在捕獲階段觸發(fā)，因此這里的事件監(jiān)聽器會優(yōu)先 @click 觸發(fā)回調(diào)；
- 其次使用了 stopImmediatePropagation 阻止事件冒泡和其它相同事件監(jiān)聽器的觸發(fā)；
如果多個事件監(jiān)聽器被附加到相同元素的相同事件類型上，當此事件觸發(fā)時，它們會按其被添加的順序被調(diào)用。如果在其中一個事件監(jiān)聽器中執(zhí)行 stopImmediatePropagation() ，那么剩下的事件監(jiān)聽器都不會被調(diào)用。MSDN - stopImmediatePropagation
增加禁用的 CSS 樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.permission-disabled { position: relative; cursor: not-allowed !important; pointer-events: none; // 阻止元素成為鼠標事件 border:none; background-image: none; &::after { content: ''; position: absolute; bottom: 0; left: 0px; right: 0px; height: 100%; z-index: 9; background: rgba(255, 255, 255, 0.5); }} |
這里使用了一個比較陌生的 CSS 屬性， pointer-events。
CSS3 的 pointer-events 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。 更多用法參考：MSDN - pointer-events
這里使用 pointer-events 只是一個輔助功能，并不一定意味著元素上的事件監(jiān)聽器永遠不會觸發(fā)，如果后代元素有指定 pointer-events 并允許成為事件目標的話，是可以觸發(fā)父元素事件，而且單純依靠 CSS 屬性來控制不點擊，還是有風險，因此這里僅作輔助作用。
全局 "權(quán)限判斷" 工具函數(shù)
|
1
2
3
4
5
6
|
import { getStore, } from '@/util/store';const autoCodeList = getStore({ name: 'autoCodeList', }) || [];export function hasPermission(authName) { return !(autoCodeList.length > 0 && autoCodeList.includes(authName));} |
具體使用
|
1
2
3
4
5
|
// 指令方式（這里的 oms/order/save 就是對應(yīng)用戶登陸時 CODE 權(quán)限碼）<el-button v-permission="'oms:order:save'">保存</el-button>// 函數(shù)方式<el-button :disabled="hasPermission('oms:order:save')"></el-button> |
到此這篇關(guān)于vue基于Element按鈕權(quán)限實現(xiàn)方案的文章就介紹到這了,更多相關(guān)Element 按鈕權(quán)限內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/6943747988871348255
