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

思路

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

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

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

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

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

可以看到我只返回了權(quán)限數(shù)組，因為其他字段沒有意思，當(dāng)然直接返回對象也是 ok 的

實現(xiàn)

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

/src/store/modules/user

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

為啥是在這，因為按鈕的權(quán)限是屬于每個用戶的

/src/store/getters

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

/src/store/modules/user

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

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

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

按鈕調(diào)用

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

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

最新評論