动态设置后置后台管理项目的权限（左侧的侧边栏展示）

问题描述：

后台管理系统通过权限设置，展示相应的左侧侧边栏功能。

解决思路：

（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 是架构组件，不在后台返回，在文件里单独引入

效果图如下：