PS
首次使用vue-element-admin开发一个后台管理系统,细读官方教学
手摸手,带你用 vue 撸后台 系列二(登陆权限篇)
给的示例是前端实现权限控制,无法满足也无需求,于是乎,就查阅各种资料,查看示例,整理出如下方法,实现前端通过后端的接口菜单,实现动态加载后台菜单。
如有想实现的小白,可按照我如下步骤,比对,进行实现。
唯一需要注意的是,后台返回的json数据结构更改
主要改变文件
-
/src/router/index.js 修改变量:asyncRoutes 为如下:
export const asyncRoutes = [ { path: '*', redirect: '/404', hidden: true } ]
-
src\store\modules\permission.js 做如下修改:
import { asyncRoutes, constantRoutes } from '@/router' import { getAuthMenu } from '@/api/menu' import Layout from '@/layout' /** * Use meta.role to determine if the current user has permission * 使用 meta.role 确定当前用户是否具有权限 * @param roles * @param route */ function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true } } /** * 后台查询的菜单数据拼接成路由格式的数据 * @param routes * @param data * @param is_children */ export function generaMenu(routes, data, is_children = false) { data.forEach(item => { const menu = { path: item.path, component: item.component === '#' ? Layout : resolve => require([`@/views${item.component}`], resolve), name: item.name, meta: item.meta } if (is_children === false) { menu.children = [] menu.alwaysShow = item.alwaysShow menu.redirect = item.redirect } if (item.children && is_children === false) { generaMenu(menu.children, item.children, true) } console.log(menu) routes.push(menu) }) } /** * Filter asynchronous routing tables by recursion * 通过递归过滤异步路由表 * @param routes asyncRoutes * @param roles */ export function filterAsyncRoutes(routes, roles) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { if (tmp.children) { tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res } const state = { routes: [], addRoutes: [] } const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) } } const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { const loadMenuData = [] // 先查询后台返回左侧菜单数据并将数据添加到路由 getAuthMenu().then(response => { let data = response if (!response.result) { alert(JSON.stringify(response.message)) } else { data = response.data Object.assign(loadMenuData, data) const tempAsyncRoutes = Object.assign([], asyncRoutes) generaMenu(tempAsyncRoutes, loadMenuData) let accessedRoutes if (roles.includes('admin')) { accessedRoutes = tempAsyncRoutes || [] } else { accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, roles) } commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) } }).catch(error => { console.log(error) }) }) } } export default { namespaced: true, state, mutations, actions }