按部就班VUE+Element 前端應用開發(17）--- 菜單資源管理

時間 2020-07-18

標籤按部就班 vue+element vue element 前端應用開發菜單資源管理简体版

原文原文鏈接

在權限管理系統中，菜單也屬於權限控制的一個資源，應該直接應用於角色，和權限功能點同樣，屬於角色控制的一環。不一樣角色用戶，登陸系統後，出現的系統菜單是不一樣的。在VUE+Element 前端中，咱們菜單結合路由集合，實現可訪問路由的過濾，也就實現了對應角色菜單的展現和可訪問路由的控制，詳細能夠參考隨筆《按部就班VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理》，本篇隨筆主要介紹菜單管理模塊的界面和相關的實現邏輯。html

一、菜單資源及管理界面介紹

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

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

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

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

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

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

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

關於Awesome圖標組件的使用，能夠參考下以前我寫過的隨筆《按部就班VUE+Element 前端應用開發(11）--- 圖標的維護和使用》。async

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

// 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的圖標集合了。

二、菜單和路由的結合管理

在前面隨筆《按部就班VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理》我介紹了用戶動態配置的菜單資源，結合本系統的全部路由，實現菜單的顯示外，還過濾了系統路由，實現可訪問路由的管理，二者結合實現了系統有效的菜單和路由的控制。

前端經過接口動態獲取菜單列表，經過菜單的名稱和路由名稱的對應關係，咱們以菜單集合爲對照，而後過濾本地全部靜態路由的列表，而後得到用戶能夠訪問的路由列表，設置動態路由給前端，從而實現了界面根據用戶角色/權限的不一樣，而變化用戶的菜單界面和可訪問路由集合。

菜單路由處理的大概的操做過程以下所示

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

在前端界面處理中，咱們經過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專用
      },