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

思路

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

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

表結構與數據

就表結構方面設計上不管有哪些字段，我們需要一個字段來存儲唯一權限，其他都是浮云，如圖

打印看看獲取到的數據

可以看到我只返回了權限數組，因為其他字段沒有意思，當然直接返回對象也是 ok 的

實現

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

/src/store/modules/user

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

為啥是在這，因為按鈕的權限是屬于每個用戶的

/src/store/getters

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

/src/store/modules/user

回到 user 文件，現在我們可以把取到的 button 權限放到全局變量中就行了

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

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

按鈕調用

調用就很簡單了，直接獲取全局中的權限，用 v-if 判斷是否包含這個按鈕就行了，includes 后面的字符串就是對應這個按鈕的權限
PS：如果存儲起來的不是這種簡單的字符串數組，也可以改為 some 函數去判斷

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

最新評論