vue-element-admin动态加载路由菜单，实现管理菜单权限控制
vue-element-admin 动态加载后端返回菜单，实现后台管理菜单权限控制
PS
⾸次使⽤vue-element-admin开发⼀个后台管理系统，细读官⽅教学
⼿摸⼿，带你⽤ vue 撸后台 系列⼆（登陆权限篇）
给的⽰例是前端实现权限控制，⽆法满⾜也⽆需求，于是乎，就查阅各种资料，查看⽰例，整理出如下⽅法，实现前端通过后端的接⼝菜单，实现动态加载后台菜单。
如有想实现的⼩⽩，可按照我如下步骤，⽐对，进⾏实现。
唯⼀需要注意的是，后台返回的json数据结构更改
主要改变⽂件
1. /src/router/index.js 修改变量：asyncRoutes 为如下：
export const asyncRoutes =[
{
path:'*',
redirect:'/404',
hidden:true
}
]
2. src\store\modules\permission.js 做如下修改：vue element admin
import{ asyncRoutes, constantRoutes }from'@/router'
import{ getAuthMenu }from'@/api/menu'
import Layout from'@/layout'
/**
* le to determine if the current user has permission
* 使⽤ le 确定当前⽤户是否具有权限
* @param roles
* @param route
*/
function hasPermission(roles, route){
a && les){
return roles.some(role => les.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: itemponent ==='#'? Layout : resolve =>require([`@/views${itemponent}`], resolve),
name: item.name,
meta: a
}
if(is_children ===false){
if(is_children ===false){
menu.children =[]
menu.alwaysShow = item.alwaysShow
}
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
}
}
const actions ={
generateRoutes({ commit }, roles){
return new Promise(resolve =>{
const loadMenuData =[]
// 先查询后台返回左侧菜单数据并将数据添加到路由
getAuthMenu().then(response =>{
let data = response
if(!sult){
alert(JSON.ssage))
}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
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。