背景说明
后台工程使用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 接口获取菜单数据，及数据格式如下图
添加动态菜单步骤：
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、菜单图标没有展示全，需要调整一些
