Vue-element-admin 从后台动态获取菜单

背景说明

后台工程使用xpos
项目地址：rest_xops giehub地址

感兴趣的同学可以下载。

xops 安装时候需要注意：
1、url 仅保留rbac
2、前台 package.json "webpack-dev-server": "3.4.1",改成3.4.1 版本
否则启动错误。

由于该项目已经实现了较为完整的 rbac 并且是使用的 django restframework。作为后台功能已经比较完备。
但是，该项目配套的前台项目工程，规范性略差。所以想用 vue-element-admin替换。

所以需要能够动态从后台获取菜单。

实际上 xops 的前台也是使用vue-element为基础构建的。所以替换起来实际上比较方便。下面大部分代码来源于rest_xops
感谢原作者
更该功能更改前 vue-element-admin 需要已经修改 request.js 并且可正常登录。正常获取token。相关内容不再此展开

解决思路

通过读admin的代码知道。菜单的获取逻辑是。根目录的 permission.js （注意不是store例的permission.js）方法
调用 store中的permission.js 的generateRoutes 方法获取正确的菜单。然后通过调用 router.addRoutes
所以，只需要 permission/generateRoutes 的返回值是标准的菜单地址即可。

// generate accessible routes map based on roles
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

          // dynamically add accessible routes
        
          router.addRoutes(accessRoutes)
    
          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })

后台接口与菜单返回格式

后台使用 /auth/build/menus 接口获取菜单数据，及数据格式如下图

image.png

添加动态菜单步骤：

1、在 src/api/user.js (或者拷贝愿项目的 login.js) 主要添加如下方法：
发送消息

export function getMenus() {
  return request({
    url: 'auth/build/menus/',
    method: 'get'
  })
}

2、修改 store/modules/permission.js
2.1 在store/modules/permission.js 中添加api饮用

import { getMenus } from '@/api/login'

2.2修改permission.js 中下面的方法将原来调用根据权限生成路由的方法替换成 查询后台生成菜单

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise((resolve, reject) => {
      // // let accessedRoutes
      // if (roles.includes('admin')) {
      //   accessedRoutes = asyncRoutes || []
      // } else {
      //   accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      // }
      console.log('in generateRoutes')
      getMenus().then(response => {
        const { detail } = response
        console.log('in getMenus')
        console.log(detail)
        const asyncRouter = filterAsyncRouter(detail)
        commit('SET_ROUTES', asyncRouter)
        resolve(asyncRouter)
      }).catch(error => {
        reject(error)
      })
      // commit('SET_ROUTES', accessedRoutes)
      // resolve(accessedRoutes)
    })
  }
}

2.3 在store/modules/permission.js 添加地址菜单过滤方法生成最终 admin的菜单

export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由字符串，转换为组件对象
  const accessedRouters = routers.filter(router => {
    if (router.component) {
      // if (router.component === 'Layout') { // Layout组件特殊处理
      //   router.component = Layout
      // } else {
      const component = router.component
      router.component = loadView(component)
      // }
    }
    if (router.children && router.children.length) {
      router.children = filterAsyncRouter(router.children)
    }
    return true
  })
  return accessedRouters
}

export const loadView = (view) => { // 路由懒加载
  return () => import(`@/views/${view}`)
}

修改完成登录后就可以看到相关页面

修改完的菜单页面

后面还需要解决下面两个问题：
1、需要将静态菜单同步显示（思路读取router将两个菜单拼一起）
2、菜单图标没有展示全，需要调整一些