您好,登錄后才能下訂單哦!
這篇文章主要介紹vue + vuex + directives如何實(shí)現(xiàn)權(quán)限按鈕,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
遇到了一個(gè)業(yè)務(wù)場(chǎng)景:
某個(gè)按鈕按下去之前需要先判斷它是否登陸,如果沒(méi)有登陸需要跳轉(zhuǎn)到對(duì)應(yīng)的登陸頁(yè)面,否則就繼續(xù)該按鈕之后的操作。
對(duì)于這種問(wèn)題,很顯然不能每個(gè)按鈕都去判斷,所以我思考了一下結(jié)合自定義指令和vuex完成了相應(yīng)的實(shí)現(xiàn)。
主要的代碼實(shí)現(xiàn)
const directive = Vue.directive('permission-click', { bind: (el, binding, vnode) => { el.addEventListener('click', (e) => { if (!store.getters.isLogin) { store.dispatch('showLogin') } else { typeof binding.value === 'function' && binding.value() } }) } })
這里封裝了一個(gè)自定義指令,添加了一個(gè)點(diǎn)擊事件,對(duì)于已經(jīng)登陸的則調(diào)用傳進(jìn)來(lái)的函數(shù),否則通過(guò)vuex去控制登陸(此處的登陸是通過(guò)彈窗實(shí)現(xiàn)的)
自定義組件使用的時(shí)候也極為簡(jiǎn)單
<div class="" v-permission-click="doSomething"> ... </div>
vuex里面的showLogin這個(gè)action無(wú)非就是對(duì)login的顯示隱藏flag的操作。
這里只是完成了簡(jiǎn)單的登陸權(quán)限控制,從登陸權(quán)限出發(fā),可以加入更多的權(quán)限控制,比如根據(jù)role角色判斷,然后可以全局地控制權(quán)限,且實(shí)現(xiàn)起來(lái)極為精簡(jiǎn)。
以上是“vue + vuex + directives如何實(shí)現(xiàn)權(quán)限按鈕”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。