動態設置后置后台管理項目的權限（左側的側邊欄展示）

問題描述：

后台管理系統通過權限設置，展示相應的左側側邊欄功能。

解決思路：

（1）后台接口返回相應相應的數據　　

router.beforeEach((to, from, next) => {

  if (hasToken) {

    if (!getRouter) { // 不加這個判斷，路由會陷入死循環

      request({ //  從后台請求路由表

        url: '/auth/user/getCrmUserAllPermission',

        type: 'get'

      }).then(res => {

        res.result.router.forEach((ele) => {  //該段是為了處理返回數據，可以忽略

          ele.children.forEach((item) => {

            if (item.children.length > 0) {

              delete (item.children)

            }

          })

        })

        getRouter = res.result.router

        routerGo(to, next) // 執行路由跳轉方法

      }).catch(err => {

        console.log(err)

      })

      // getRouter = fakeRouter.router // 假數據

      // routerGo(to, next) // 執行路由跳轉方法

    } else {

      next()

    }

  } else {

   

跳轉到登錄頁面

  }

})

后台返回得數據結構可以如下，這樣就可以處理比較簡單：

const fakeRouter = {
  'router': [
    {
      'path': '/',
      'component': 'Layout',
      'meta': {
        'title': '工具',
        'icon': 'dashboard'
      },
      redirect: 'department',
      children: [
        {
          path: 'department',
          name: 'department',
          component: 'hr/department/index',
          meta: { title: '部門管理' }
        }
      ]
    },
    {
      'path': '*',
      'redirect': '/404',
      'hidden': true
    }
  ]
}

　　（2）進行數據處理，處理成側邊欄可以展示得結構（目前我這只有兩級）

function routerGo(to, next) {
  getRouter = filterAsyncRouter(getRouter) // 過濾路由
  router.addRoutes(getRouter) // 動態添加路由
  global.antRouter = getRouter // 將路由數據傳遞給全局變量，做側邊欄菜單渲染工作
  next({ ...to, replace: true })
}

function filterAsyncRouter(asyncRouterMap) { // 遍歷后台傳來的路由字符串，轉換為組件對象
  const accessedRouters = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') { // Layout組件特殊處理
        route.component = Layout
      } else {
        route.component = _import(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })
  return accessedRouters
}

*需要用到的組件與插件

import router from './router'
const _import = require('./router/_import_' + process.env.NODE_ENV) // 獲取組件的方法
import Layout from '@/layout' // Layout 是架構組件，不在后台返回，在文件里單獨引入

效果圖如下：