前面介紹過，權限管理一般都會涉及到用戶、組織機構、角色，以及權限功能等方面的內容，ABP框架的基礎內容也是涉及到這幾方面的內容，其中它們之間的關系基本上是多對多的關系，它們的關系如下所示。

加入菜單資源，以及整理它們之間的關系和表的信息，整理圖示如下。

結合ABP后端提供的接口，Vue前端我們要實現基礎的用戶、組織機構、角色、功能權限等內容的管理，以及維護它們之間的關系。Vue前端對于權限管理模塊的菜單列表如下所示。

菜單列表管理界面如下圖所示，主要包括樹狀列表展示菜單結構，以及具體的菜單列表查詢處理。

菜單查看明細界面如下所示，主要就是簡單展示菜單相關的屬性數據。

而菜單的編輯或新增界面，需要考慮從已有菜單中選擇列表，以及選擇圖標信息。

其中的Awesome圖標，我們封裝了選擇圖標的組件，只從Font Awesome圖標中選擇，畢竟自帶的Element圖標太少，不太滿足要求。

其中的Web圖標選擇控件，是根據e-icon-picker控件進行修改，以采用Font Awesome圖標集合的處理

// Vue-Awesome圖標自動加入const req = require.context(’vue-awesome/icons’, true, /.js$/)const requireAll = requireContext => requireContext.keys()const re = /./(.*).js/const fontAwesome = requireAll(req).filter((key) => { return key.indexOf(’index.js’) < 0}).map(i => { return i.match(re)[1]})

菜單的展示我們也根據配置，從Awesome中選擇構建菜單的圖標項目即可。

菜單項的組件，是在Layout/Components/Sidebar/Item.vue進行修改，以適應Awesome圖標的處理

render(createElement, context) { const { icon, title } = context.props const vnodes = [] if (icon) { // vnodes.push(<svg-icon icon-class={icon} />) // 使用自定義svg圖標 // vnodes.push(<i class={icon}/>) // 使用內置element圖標 vnodes.push(<v-icon name={icon} scale=’1.1’ style=’padding-right:3px’/>)// 使用awesome圖標 } if (title) { vnodes.push(<span slot=’title’>{(title)}</span>) } return vnodes }

通過各個地方進行修改，我們就可以使用Awesome的圖標集合了。

前端通過接口動態獲取菜單列表，通過菜單的名稱和路由名稱的對應關系，我們以菜單集合為對照，然后過濾本地所有靜態路由的列表，然后獲得用戶可以訪問的路由列表，設置動態路由給前端，從而實現了界面根據用戶角色/權限的不同，而變化用戶的菜單界面和可訪問路由集合。

菜單路由處理的大概的操作過程如下所示

前端界面的動態菜單、本地路由、菜單導航和可訪問路由的幾個概念如下所示。

在前端界面處理中，我們通過Element界面組件的方式展示動態菜單信息，并結合菜單和路由的關系，實現菜單跳轉到對應視圖的處理過程。

因此，系統管理里面的菜單信息配置界面中，菜單的Web地址，對應的是系統靜態路由的名稱，如下界面所示。

之前定義系統的路由信息格式如下所示

// 定義本系統的所有路由，具體路由呈現經過菜單數據過濾export const asyncRoutes = { ’dashboard’: { path: ’/dashboard’, component: Layout, children: [{ path: ’dashboard’, name: ’dashboard’, component: () => import(’@/views/dashboard/index’) }] }, ’product’: { path: ’/product’, component: Layout, children: [{ path: ’/product’, name: ’product’, component: () => import(’@/views/Product/index’) }] }, .............................. //省略部分 ’icon’: { path: ’/icon’, component: Layout, children: [{ path: ’/icon’, name: ’icon’, component: () => import(’@/views/icons/index’) }] }, ’external-link’: { path: ’http://www.iqidi.com’, name: ’external-link’ }}

有了這些準備，我們在用戶登錄系統后，就從后臺獲取對應的菜單列表。

在系統登錄處理過程中，考慮到初始化的時候，如果用戶是管理員admin，并且獲取用戶菜單為空，可以考慮使用預設的靜態菜單資源，可以讓用戶先配置好權限菜單。

// 系統靜態菜單 var staticmenus = await GetStaticMenus() // console.log(menus) // 如果用戶是admin 并且角色集合中沒有菜單，則使用靜態菜單 var username = store.getters.name // 用戶名 if (username === ’admin’) { if (!menus || typeof (menus) === ’undefined’ || menus.length === 0) {menus = staticmenus // 系統管理員，初始化的時候使用靜態菜單 } }

由于之前開發了一個基于Winform的ABP前端應用，因此我們菜單為了整合兩個應用，在菜單表示增加一個一個Tag標簽，用來區分是Winform界面的菜單還是Web的菜單，畢竟兩者菜單的處理方式是不同的。

addForm: { // 添加表單id: this.guid(),pid: ’’,name: ’’,url: ’’,seq: ’001’,isTop: false,expand: 1,visible: 1,webIcon: ’’,tag: ’web’// Web專用 },

WInform客戶端的菜單也是從服務器端請求數據，并動態構建的，Winform端的菜單展示效果如下所示。

以上就是Vue Element前端應用開發之菜單資源管理的詳細內容，更多關于Vue Element之菜單資源管理的資料請關注好吧啦網其它相關文章！