現(xiàn)在web前端也是一個(gè)非常熱門的行業(yè)，想要學(xué)習(xí)web前端開發(fā)的同學(xué)請看這里北京web前端權(quán)限控制 ，通過對手把手教你搞定權(quán)限管理，結(jié)合Vue實(shí)現(xiàn)菜單的動(dòng)態(tài)權(quán)限控制！?? 的了解，希望以上信息可以幫助到您
1.手把手教你搞定權(quán)限管理，結(jié)合Vue實(shí)現(xiàn)菜單的動(dòng)態(tài)權(quán)限控制！
權(quán)限管理在后端項(xiàng)目中主要體現(xiàn)在對接口訪問權(quán)限的控制，在前端項(xiàng)目中主要體現(xiàn)在對菜單訪問權(quán)限的控制。在《手把手教你搞定權(quán)限管理，結(jié)合Spring Security實(shí)現(xiàn)接口的動(dòng)態(tài)權(quán)限控制！》中我們實(shí)現(xiàn)了對后端接口的動(dòng)態(tài)權(quán)限控制，今天我們講下如何結(jié)合Vue來實(shí)現(xiàn)菜單的動(dòng)態(tài)權(quán)限控制。 實(shí)戰(zhàn)電商項(xiàng)目mall（30k+star）地址： Router，另一種是Vuex，我們先來了解下這兩種技術(shù)。 Vue RouterVue Router是Vue.js官方的路由管理器。路由就是一個(gè)路徑，當(dāng)我們訪問指定路徑時(shí)就會(huì)跳轉(zhuǎn)到指定頁面。 我們項(xiàng)目的路由都是在src/router/index.js文件中定義的，舉個(gè)例子，比如我們的商品列表頁面路由定義如下。所以當(dāng)我們訪問 Router中定義的路由表生成的，要實(shí)現(xiàn)動(dòng)態(tài)菜單顯示，其實(shí)只要實(shí)現(xiàn)動(dòng)態(tài)路由即可。VuexVuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)。Vuex可以簡單理解為一個(gè)全局的狀態(tài)管理器，我們可以把一些全局的狀態(tài)存儲(chǔ)在里面。當(dāng)我們在多個(gè)組件中顯示這些狀態(tài)時(shí)，只要在任意一個(gè)組件中改變這個(gè)狀態(tài)，基于Vue的響應(yīng)式渲染，其余組件中的這個(gè)狀態(tài)均會(huì)改變。Vuex中有幾個(gè)核心概念需要了解下：Store：相當(dāng)于一個(gè)容器，它包含著應(yīng)用中大部分的狀態(tài)；State：Store中存儲(chǔ)的狀態(tài)，由于使用了單一狀態(tài)樹，即Vuex中存儲(chǔ)的狀態(tài)只存在一份，當(dāng)這個(gè)狀態(tài)發(fā)生改變時(shí)，和它綁定的組件中的這個(gè)狀態(tài)均會(huì)發(fā)生改變；Getter：從State中派生出的一些狀態(tài)，可以認(rèn)為是State的計(jì)算屬性；Mutation：狀態(tài)的變化，更改Vuex中的State的*方法是提交Mutation；Action：用于提交Mutation的動(dòng)作，從而更改Vuex中的State；Module：Store中的模塊，由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對象。為了解決以上問題，Vuex允許我們將Store分割成模塊。Vuex中的核心流程如下：菜單的動(dòng)態(tài)權(quán)限控制 接下來我們來講下如何結(jié)合Vue Router和Vuex來實(shí)現(xiàn)菜單的動(dòng)態(tài)權(quán)限控制。 首先我們需要修改src/router/index.js中的路由表，將路由表進(jìn)行拆分，拆分成必須要顯示的靜態(tài)路由表和可以動(dòng)態(tài)顯示的動(dòng)態(tài)路由表。然后我們需要添加src/store/modules/.js文件，在Vuex的Store中添加權(quán)限相關(guān)狀態(tài)，比如和左側(cè)菜單綁定的路由表。這里有個(gè)比較核心的方法，用于生成當(dāng)前用戶可以訪問的路由。我們的data參數(shù)中包含了用戶可以訪問的菜單信息。它的具體執(zhí)行流程如下：從菜單信息中篩選出可以訪問的動(dòng)態(tài)路由，然后進(jìn)行排序，*提交狀態(tài)改變到Vuex中去改變r(jià)outers這個(gè)狀態(tài)。關(guān)于前端路由和后臺(tái)菜單的匹配，其實(shí)是根據(jù)路由名稱和菜單的前端名稱來確定的，比如商品列表中的路由名稱和ums_menu表中存儲(chǔ)的前端名稱如下。接下來我們需要修改src/store/index.js文件，在Vuex的Store中添加這個(gè)權(quán)限模塊的狀態(tài)。再修改src/store/getters.js文件，給權(quán)限模塊中的兩個(gè)狀態(tài)取個(gè)別名方便訪問。我們還需要修改src/views/layout//Sidebar/index.vue文件，將左側(cè)菜單組件和Vuex中存儲(chǔ)的路由狀態(tài)進(jìn)行綁定，這樣當(dāng)我們修改了Vuex中的狀態(tài)后，菜單就會(huì)改變了。是個(gè)輔助函數(shù)，可以將Store中的Getter屬性映射到局部計(jì)算屬性。*我們需要在用戶登錄成功后，通過store.dispatch('', { menus,username })來修改Vuex中存儲(chǔ)的路由狀態(tài)并傳入用戶可以訪問的菜單信息。權(quán)限管理功能演示具體參考：大家心心念念的權(quán)限管理功能，這次安排上了！項(xiàng)目源碼地址 本文 GitHub 已經(jīng)收錄，歡迎大家Star！
看了以上有關(guān)手把手教你搞定權(quán)限管理，結(jié)合Vue實(shí)現(xiàn)菜單的動(dòng)態(tài)權(quán)限控制！??的講解，如果還有什么疑問可以直接來電咨詢