隨著軟件的發(fā)展，網(wǎng)站從最初的滿足用戶業(yè)務(wù)需求到提升用戶。就比如一個(gè)按鈕只要求權(quán)限方面的管控我們可以通過 shiro，注解等方式來實(shí)現(xiàn)，但是頁面上用戶點(diǎn)擊后沒反應(yīng)或者點(diǎn)擊后彈框沒權(quán)限，這顯然不是一個(gè)好的用戶體驗(yàn)，因此通過前端來實(shí)現(xiàn)權(quán)限管控也是很有必要的。

思路

1.獲取按鈕權(quán)限
2.按鈕權(quán)限保存在前端全局中 vuex
3.頁面加載按鈕時(shí)通過判斷權(quán)限的存在與否，控制按鈕的顯示隱藏或者樣式選擇

PS：事實(shí)證明，思路清晰，實(shí)現(xiàn)起來就很容易，沒幾行代碼

表結(jié)構(gòu)與數(shù)據(jù)

就表結(jié)構(gòu)方面設(shè)計(jì)上不管有哪些字段，我們需要一個(gè)字段來存儲(chǔ)唯一權(quán)限，其他都是浮云，如圖

打印看看獲取到的數(shù)據(jù)

可以看到我只返回了權(quán)限數(shù)組，因?yàn)槠渌侄螞]有意思，當(dāng)然直接返回對(duì)象也是 ok 的

實(shí)現(xiàn)

先來添加下 vuex 全局變量，方便后面獲取到按鈕權(quán)限后進(jìn)行存儲(chǔ)

/src/store/modules/user

新增 button 全局變量，并在新增 mutations 操作 button

為啥是在這，因?yàn)榘粹o的權(quán)限是屬于每個(gè)用戶的

/src/store/getters

使用時(shí)我們一般需要通過這個(gè)東西來獲取全局變量中的值
這個(gè) state.user.button 以我的理解就是上圖中 user 對(duì)象下的 button

/src/store/modules/user

回到 user 文件，現(xiàn)在我們可以把取到的 button 權(quán)限放到全局變量中就行了

做過權(quán)限模塊的都知道這個(gè) GetUserInfo 方法，每次緩存失效后，都會(huì)調(diào)用這個(gè)方法去獲取必要的用戶信息，這里按鈕權(quán)限我也是在這里直接返回獲取。
如果說你的按鈕權(quán)限時(shí)單獨(dú)寫的，你也可以在這個(gè)文件里寫個(gè)獲取的方法，然后再 permission 文件里去調(diào)用，如圖

當(dāng)然我不太建議單獨(dú)去獲取，因?yàn)橛捎趘ue自身特性的原因，vuex中的數(shù)據(jù)在頁面刷新之后其中的數(shù)據(jù)會(huì)初始化，也就是數(shù)據(jù)沒了，這個(gè)時(shí)候就會(huì)去調(diào)用后臺(tái)去獲取數(shù)據(jù)，如果每次都去單獨(dú)獲取，在高并發(fā)等情況下這種頻繁的重復(fù)數(shù)據(jù)的請(qǐng)求會(huì)給數(shù)據(jù)庫帶來巨大的壓力，因此像一些用戶權(quán)限數(shù)據(jù)，我比較建議在登陸時(shí)統(tǒng)一獲取后保存到 redis 這種地方，以后的請(qǐng)求都只需要從 redis 取就可以了，效率上也會(huì)得到巨大的提升。

按鈕調(diào)用

調(diào)用就很簡單了，直接獲取全局中的權(quán)限，用 v-if 判斷是否包含這個(gè)按鈕就行了，includes 后面的字符串就是對(duì)應(yīng)這個(gè)按鈕的權(quán)限
PS：如果存儲(chǔ)起來的不是這種簡單的字符串?dāng)?shù)組，也可以改為 some 函數(shù)去判斷

到此這篇關(guān)于vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue-element-admin按鈕權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論