根据后端返回列表数据动态生成后台管理系统权限菜单

最新推荐文章于 2023-11-05 15:45:27 发布
最新推荐文章于 2023-11-05 15:45:27 发布
阅读量1.1k 收藏 14
点赞数 1
分类专栏： vue-router 权限菜单栏 文章标签： vue vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_Sarah/article/details/109743020
版权

项目需求：后端返回权限数组，前端通过js操作，生成一棵权限树，并将这棵树动态加入路由route中，从而实现动态生成后台管理系统左侧菜单栏
后端返回的数据：

[
    {
        "parentId":"0",
        "resCode":"city",
        "resId":"07fe2c8b976047e186bb6bcb8f4d6544",
        "resLevel":2,
        "resName":"城运微平台",
        "resOrder":0,
        "resType":1
    },
    {
        "parentId":"0",
        "resCode":"nbh",
        "resId":"07fe2c8c976047e186bb6bcb8f4d6545",
        "resLevel":2,
        "resName":"居委微平台",
        "resOrder":0,
        "resType":2
    },
    {
        "parentId":"0",
        "resCode":"street",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6547",
        "resLevel":2,
        "resName":"街镇微平台",
        "resOrder":0,
        "resType":3
    },
    {
        "parentId":"07fe2c8c976047e186bb6bcb8f4d6545",
        "resCode":"JWHT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6557",
        "resLevel":3,
        "resName":"后台管理",
        "resType":2,
        "sysUrl":""
    },
    {
        "parentId":"07fe2c8c976047e186bb6bcb8f4d6545",
        "resCode":"JWQT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6558",
        "resLevel":3,
        "resName":"前台管理",
        "resType":2,
        "sysUrl":""
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6547",
        "resCode":"JZHT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6559",
        "resLevel":3,
        "resName":"后台管理",
        "resType":3,
        "sysUrl":""
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6547",
        "resCode":"JZQT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6560",
        "resLevel":3,
        "resName":"前台管理",
        "resType":3,
        "sysUrl":""
    },
    {
        "parentId":"07fe2c8b976047e186bb6bcb8f4d6544",
        "resCode":"CYHT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6561",
        "resLevel":3,
        "resName":"后台管理",
        "resType":1
    },
    {
        "parentId":"07fe2c8b976047e186bb6bcb8f4d6544",
        "resCode":"CYQT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6562",
        "resLevel":3,
        "resName":"前台管理",
        "resType":1
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
        "resCode":"CYTZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6563",
        "resLevel":4,
        "resName":"通知公告设置",
        "resType":1,
        "sysUrl":"/sys/city/inform"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
        "resCode":"JWTZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6564",
        "resLevel":4,
        "resName":"通知公告设置",
        "resType":2,
        "sysUrl":"/sys/nbh/inform"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
        "resCode":"JZTZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6565",
        "resLevel":4,
        "resName":"通知公告设置",
        "resType":3,
        "sysUrl":"/sys/street/inform"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
        "resCode":"CYJS",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6566",
        "resLevel":4,
        "resName":"角色管理",
        "resType":1,
        "sysUrl":"/sys/city/role"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
        "resCode":"JWJS",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6567",
        "resLevel":4,
        "resName":"角色管理",
        "resType":2,
        "sysUrl":"/sys/nbh/role"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
        "resCode":"JZJS",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6568",
        "resLevel":4,
        "resName":"角色管理",
        "resType":3,
        "sysUrl":"/sys/street/role"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
        "resCode":"CYYH",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6569",
        "resLevel":4,
        "resName":"用户管理",
        "resType":1,
        "sysUrl":"/sys/city/user"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
        "resCode":"JWYH",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6570",
        "resLevel":4,
        "resName":"用户管理",
        "resType":2,
        "sysUrl":"/sys/nbh/user"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
        "resCode":"JZYH",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6571",
        "resLevel":4,
        "resName":"用户管理",
        "resType":3,
        "sysUrl":"/sys/street/user"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6562",
        "resCode":"CYZXT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6572",
        "resLevel":4,
        "resName":"城运子系统列表",
        "resType":1,
        "sysUrl":"/sys/city/subsys"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6558",
        "resCode":"JWZXT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6573",
        "resLevel":4,
        "resName":"居委子系统列表",
        "resType":2,
        "sysUrl":"/sys/nbh/subsys"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6560",
        "resCode":"JZZXT",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6574",
        "resLevel":4,
        "resName":"街道子系统列表",
        "resType":3,
        "sysUrl":"/sys/street/subsys"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
        "resCode":"CYZXTSZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6575",
        "resLevel":4,
        "resName":"子系统设置",
        "resType":1,
        "sysUrl":"/sys/city/subset"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
        "resCode":"JWZXTSZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6576",
        "resLevel":4,
        "resName":"子系统设置",
        "resType":2,
        "sysUrl":"/sys/nbh/subset"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
        "resCode":"JZZXTSZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6577",
        "resLevel":4,
        "resName":"子系统设置",
        "resType":3,
        "sysUrl":"/sys/street/subset"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
        "resCode":"CYZBSZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6578",
        "resLevel":4,
        "resName":"值班列表设置",
        "resType":1,
        "resUrl":"",
        "sysUrl":"/sys/city/duty"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
        "resCode":"JWZBSZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6579",
        "resLevel":4,
        "resName":"值班列表设置",
        "resType":2,
        "resUrl":"",
        "sysUrl":"/sys/nbh/duty"
    },
    {
        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
        "resCode":"JZZBSZ",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6580",
        "resLevel":4,
        "resName":"值班列表设置",
        "resType":3,
        "resUrl":"",
        "sysUrl":"/sys/street/duty"
    }
]

第一步：将后端返回的列表数据转换成一棵树tree
实现代码：

// 生成权限树
const createTree = (arr) => {
  const map = {}
  arr.map(item => {
    //此处设置meta，增加title,icon和sysUrl，为后续添加route做准备
    item.meta = { title: item.resName, icon: 'el-icon-s-help', sysUrl: item.sysUrl }
    map[item.resId] = item
  })
  const routeTree = []
  arr.forEach(child => {
  	//利用parentId和resId的关系，生成tree
    const mapItem = map[child.parentId]
    if (mapItem) {
      (mapItem.children || (mapItem.children = [])).push(child)
    } else {
      routeTree.push(child)
    }
  })
  return routeTree
}

生成的权限树：

[
    {
        "parentId":"0",
        "resCode":"city",
        "resId":"07fe2c8b976047e186bb6bcb8f4d6544",
        "resLevel":2,
        "resName":"城运微平台",
        "resOrder":0,
        "resType":1,
        "meta":{
            "title":"城运微平台",
            "icon":"el-icon-s-help"
        },
        "children":[
            {
                "parentId":"07fe2c8b976047e186bb6bcb8f4d6544",
                "resCode":"CYHT",
                "resId":"07fe2e8c976047e186bb6bcb8f4d6561",
                "resLevel":3,
                "resName":"后台管理",
                "resType":1,
                "meta":{
                    "title":"后台管理",
                    "icon":"el-icon-s-help"
                },
                "children":[
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
                        "resCode":"CYTZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6563",
                        "resLevel":4,
                        "resName":"通知公告设置",
                        "resType":1,
                        "sysUrl":"/sys/city/inform",
                        "meta":{
                            "title":"通知公告设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/city/inform"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
                        "resCode":"CYJS",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6566",
                        "resLevel":4,
                        "resName":"角色管理",
                        "resType":1,
                        "sysUrl":"/sys/city/role",
                        "meta":{
                            "title":"角色管理",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/city/role"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
                        "resCode":"CYYH",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6569",
                        "resLevel":4,
                        "resName":"用户管理",
                        "resType":1,
                        "sysUrl":"/sys/city/user",
                        "meta":{
                            "title":"用户管理",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/city/user"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
                        "resCode":"CYZXTSZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6575",
                        "resLevel":4,
                        "resName":"子系统设置",
                        "resType":1,
                        "sysUrl":"/sys/city/subset",
                        "meta":{
                            "title":"子系统设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/city/subset"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6561",
                        "resCode":"CYZBSZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6578",
                        "resLevel":4,
                        "resName":"值班列表设置",
                        "resType":1,
                        "resUrl":"",
                        "sysUrl":"/sys/city/duty",
                        "meta":{
                            "title":"值班列表设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/city/duty"
                        }
                    }
                ]
            },
            {
                "parentId":"07fe2c8b976047e186bb6bcb8f4d6544",
                "resCode":"CYQT",
                "resId":"07fe2e8c976047e186bb6bcb8f4d6562",
                "resLevel":3,
                "resName":"前台管理",
                "resType":1,
                "meta":{
                    "title":"前台管理",
                    "icon":"el-icon-s-help"
                },
                "children":[
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6562",
                        "resCode":"CYZXT",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6572",
                        "resLevel":4,
                        "resName":"城运子系统列表",
                        "resType":1,
                        "sysUrl":"/sys/city/subsys",
                        "meta":{
                            "title":"城运子系统列表",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/city/subsys"
                        }
                    }
                ]
            }
        ]
    },
    {
        "parentId":"0",
        "resCode":"nbh",
        "resId":"07fe2c8c976047e186bb6bcb8f4d6545",
        "resLevel":2,
        "resName":"居委微平台",
        "resOrder":0,
        "resType":2,
        "meta":{
            "title":"居委微平台",
            "icon":"el-icon-s-help"
        },
        "children":[
            {
                "parentId":"07fe2c8c976047e186bb6bcb8f4d6545",
                "resCode":"JWHT",
                "resId":"07fe2e8c976047e186bb6bcb8f4d6557",
                "resLevel":3,
                "resName":"后台管理",
                "resType":2,
                "sysUrl":"",
                "meta":{
                    "title":"后台管理",
                    "icon":"el-icon-s-help",
                    "sysUrl":""
                },
                "children":[
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
                        "resCode":"JWTZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6564",
                        "resLevel":4,
                        "resName":"通知公告设置",
                        "resType":2,
                        "sysUrl":"/sys/nbh/inform",
                        "meta":{
                            "title":"通知公告设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/nbh/inform"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
                        "resCode":"JWJS",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6567",
                        "resLevel":4,
                        "resName":"角色管理",
                        "resType":2,
                        "sysUrl":"/sys/nbh/role",
                        "meta":{
                            "title":"角色管理",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/nbh/role"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
                        "resCode":"JWYH",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6570",
                        "resLevel":4,
                        "resName":"用户管理",
                        "resType":2,
                        "sysUrl":"/sys/nbh/user",
                        "meta":{
                            "title":"用户管理",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/nbh/user"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
                        "resCode":"JWZXTSZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6576",
                        "resLevel":4,
                        "resName":"子系统设置",
                        "resType":2,
                        "sysUrl":"/sys/nbh/subset",
                        "meta":{
                            "title":"子系统设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/nbh/subset"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6557",
                        "resCode":"JWZBSZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6579",
                        "resLevel":4,
                        "resName":"值班列表设置",
                        "resType":2,
                        "resUrl":"",
                        "sysUrl":"/sys/nbh/duty",
                        "meta":{
                            "title":"值班列表设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/nbh/duty"
                        }
                    }
                ]
            },
            {
                "parentId":"07fe2c8c976047e186bb6bcb8f4d6545",
                "resCode":"JWQT",
                "resId":"07fe2e8c976047e186bb6bcb8f4d6558",
                "resLevel":3,
                "resName":"前台管理",
                "resType":2,
                "sysUrl":"",
                "meta":{
                    "title":"前台管理",
                    "icon":"el-icon-s-help",
                    "sysUrl":""
                },
                "children":[
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6558",
                        "resCode":"JWZXT",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6573",
                        "resLevel":4,
                        "resName":"居委子系统列表",
                        "resType":2,
                        "sysUrl":"/sys/nbh/subsys",
                        "meta":{
                            "title":"居委子系统列表",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/nbh/subsys"
                        }
                    }
                ]
            }
        ]
    },
    {
        "parentId":"0",
        "resCode":"street",
        "resId":"07fe2e8c976047e186bb6bcb8f4d6547",
        "resLevel":2,
        "resName":"街镇微平台",
        "resOrder":0,
        "resType":3,
        "meta":{
            "title":"街镇微平台",
            "icon":"el-icon-s-help"
        },
        "children":[
            {
                "parentId":"07fe2e8c976047e186bb6bcb8f4d6547",
                "resCode":"JZHT",
                "resId":"07fe2e8c976047e186bb6bcb8f4d6559",
                "resLevel":3,
                "resName":"后台管理",
                "resType":3,
                "sysUrl":"",
                "meta":{
                    "title":"后台管理",
                    "icon":"el-icon-s-help",
                    "sysUrl":""
                },
                "children":[
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
                        "resCode":"JZTZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6565",
                        "resLevel":4,
                        "resName":"通知公告设置",
                        "resType":3,
                        "sysUrl":"/sys/street/inform",
                        "meta":{
                            "title":"通知公告设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/street/inform"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
                        "resCode":"JZJS",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6568",
                        "resLevel":4,
                        "resName":"角色管理",
                        "resType":3,
                        "sysUrl":"/sys/street/role",
                        "meta":{
                            "title":"角色管理",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/street/role"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
                        "resCode":"JZYH",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6571",
                        "resLevel":4,
                        "resName":"用户管理",
                        "resType":3,
                        "sysUrl":"/sys/street/user",
                        "meta":{
                            "title":"用户管理",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/street/user"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
                        "resCode":"JZZXTSZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6577",
                        "resLevel":4,
                        "resName":"子系统设置",
                        "resType":3,
                        "sysUrl":"/sys/street/subset",
                        "meta":{
                            "title":"子系统设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/street/subset"
                        }
                    },
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6559",
                        "resCode":"JZZBSZ",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6580",
                        "resLevel":4,
                        "resName":"值班列表设置",
                        "resType":3,
                        "resUrl":"",
                        "sysUrl":"/sys/street/duty",
                        "meta":{
                            "title":"值班列表设置",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/street/duty"
                        }
                    }
                ]
            },
            {
                "parentId":"07fe2e8c976047e186bb6bcb8f4d6547",
                "resCode":"JZQT",
                "resId":"07fe2e8c976047e186bb6bcb8f4d6560",
                "resLevel":3,
                "resName":"前台管理",
                "resType":3,
                "sysUrl":"",
                "meta":{
                    "title":"前台管理",
                    "icon":"el-icon-s-help",
                    "sysUrl":""
                },
                "children":[
                    {
                        "parentId":"07fe2e8c976047e186bb6bcb8f4d6560",
                        "resCode":"JZZXT",
                        "resId":"07fe2e8c976047e186bb6bcb8f4d6574",
                        "resLevel":4,
                        "resName":"街道子系统列表",
                        "resType":3,
                        "sysUrl":"/sys/street/subsys",
                        "meta":{
                            "title":"街道子系统列表",
                            "icon":"el-icon-s-help",
                            "sysUrl":"/sys/street/subsys"
                        }
                    }
                ]
            }
        ]
    }
]

第二步：动态生成路由
先上代码，后面解释实现思路：

// router配置文件
import router from '@/router'
// vue-template-admin框架自带
import Layout from '@/layout'
/*routes 后端返回的权限列表数据*/
const addRouter = (routes) => {
  //通过第一步的createTree方法生成权限树tree
  const routeTree = createTree(routes)
  /*根据vue的route规则处理权限树 
  >>1.每一级的path是必填且唯一值
  >>2.原则上有多少级路由嵌套就需要多少个<router-view>（即如果你的路由是三级路由嵌套，不要忘记还要手动在二级目录的根文件下添加一个 <router-view>）
  */
  /* 处理二级及二级以上路由 */
  const createMenuTree = (adminTree) => {
    adminTree.forEach(item => {
      item.path = item.resCode.toLowerCase()
      item.name = item.resCode
      if (item.children && item.children.length) {
        createMenuTree(item.children)
        // 最后一级菜单以上加载Roeter-view页面
        item.component = resolve => require(['@/views/dynamicAdmin/routerView.vue'], resolve)
      } else {
        // 最后一级菜单根据sysUrl（如：/sys/city/subset）的最后一个值加载对应模块
        const file = item.sysUrl && item.sysUrl.split('/')[3]
        item.component = resolve => require(['@/views/dynamicAdmin/' + file], resolve)
      }
    })
    return adminTree
  }
  routeTree.forEach(item => {
    // 一级菜单
    item.path = '/' + item.resCode.toLowerCase()
    item.name = item.resCode
    item.component = Layout
    // 二级及以下菜单
    if (item.children && item.children.length) {
      item.children = createMenuTree(item.children)
    }
  })
  console.log({ routeTree })
  router.addRoutes(routeTree)
  return routeTree
}

实现思路：
1.后端返回的数据中每一级都有resCode，且是唯一值，符合path的规则定义，因此使用resCode作为每一级路由的path（最开始后端让我使用他返回sysUrl作为跳转路由，经过了一天多时间的折腾，根本无法实现，因为只有最后一级数据才返回了sysUrl（如：/sys/city/subset），一二级的为空值，这是其一，其二这个值每一级也不是唯一的，sys是每一级都通用的，不符合path的唯一性定义，最后决定使用resCode）
2.这个项目使用的是vue-template-admin框架，第一级路由的component加载框架中的Layout 组件，第一级以上&最后一级以下（此项目中只有第二级）路由需要手动添加一个"router-view" 组件
3.由于后端使用最后一级菜单路由模块的sysUrl作为请求的基础api，所以在最后一级路由处理时，把sysUrl存入meta中，便于后期使用
4.使用router.addRoutes( )方法把生成的routes动态添加到项目的router中
5.最后一级路由的component加载（这一步操作可以说是整个权限菜单实现比较精妙的地方，可以巧妙地复用文件，减少累赘），首先看后端返回的sysUrl:

城运微平台 >>后台管理>>
                    通知公告设置('/sys/city/inform'),
                    角色管理('/sys/city/role'),
                    用户管理('/sys/city/user'),
                    子系统设置('/sys/city/subset'),
                    值班列表设置('/sys/city/duty'),
            前台管理>>
                    城运子系统列表('/sys/city/subsys'),
居委微平台 >>后台管理>>
                    通知公告设置('/sys/nbh/inform'),
                    角色管理('/sys/nbh/role'),
                    用户管理('/sys/nbh/user'),
                    子系统设置('/sys/nbh/subset'),
                    值班列表设置('/sys/nbh/duty'),
            前台管理>>
                    居委子系统列表('/sys/nbh/subsys'),
街镇微平台 >>后台管理>>
                    通知公告设置('/sys/street/inform'),
                    角色管理('/sys/street/role'),
                    用户管理('/sys/street/user'),
                    子系统设置('/sys/street/subset'),
                    值班列表设置('/sys/street/duty'),
            前台管理>>
                    街道子系统列表('/sys/street/subsys'),

以上数据可以看出，三个微平台下的模块都是一样的，因此可以利用sysUrl的最后一个值作为文件目录（即最后一级加载的component）：

// 最后一级菜单根据sysUrl（如：/sys/city/subset）的最后一个值加载对应模块
   const file = item.sysUrl && item.sysUrl.split('/')[3]
   item.component = resolve => require(['@/views/dynamicAdmin/' + file], resolve)

对应的文件目录：
在这里插入图片描述
单个文件模块，存储当前页面的sysUrl，作为请求接口的基础api（必须使用sessionStorage，如果使用localStorage，同时打开多个页面时会获取不到正确的api）
在这里插入图片描述
api.js：拼接上当前页面的sysUrl（即current_api），该文件可以写通用api和私有api
在这里插入图片描述
到这一步，动态添加权限路由就完工了，接下来就是在合适的地方使用，呈现菜单栏&页面效果

// 1.页面刷新重新设置获取缓存
const getMenuTree = () => {
  const data = JSON.parse(getStorage('admin_menu_tree'))
  return (data && addRouter(data)) || []
}
// 2.把动态生成的权限路由存放vuex的getters中（adminMenuTree:getMenuTree()）
// 3.在Sidebar组件中使用
import { mapGetters } from 'vuex'
computed: {
   ...mapGetters([
     'adminMenuTree'
   ]),
   routes() {
   	 // this.$router.options.routes是为了拼接上router中固定的路由
     return [...this.$router.options.routes, ...this.adminMenuTree]
   },
}
樱木のじしん
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring mvc 实例 --JSTL结合EL实现JSP获取后台List回显界面
Think In JAVA—Max
12-07 1万+
JSTL 和 EL 间的关系 【详见 java web前端瘦身器】，从该篇博客可以看出，JSTL是java web前台页面标签的集合，形成了一套规范，利用JSTL标签显示数据。EL表达式则是获取数据的工具，形如 ${} ，获取后台数据给标签赋值，从而回显界面。所以两者一个标签，一个标签里的数据，相辅相成。 JSTL标签： 1、常用的JSTL标签：  核心标签库包括:out 
vue 从后台获取菜单数据并表示在前端的过程
m0_51459514的博客
03-28 3333
vue 从后台获取菜单数据并表示在前端的过程
vue-element-templat 后台接口动态返回菜单
CN_CKG__KK的博客
07-15 3178
最近项目重构，因为之前一直在使用 vue-element-admin 框架，但是该项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为该项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。 作者这里用的是 vue-element-template 版本，有什么需要都可以去 vue-element-admin 复制。 集成方案:: vue-element-admin. 基础模板:: vue-element-template. B.
权限菜单（后端返回数据）
于景波的技术博客
08-11 5163
权限菜单 后端准备数据： Server.js let express = require('express'); let app = express(); app.use('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //Access-Co...
后台管理系统控制菜单权限的两种方法
最新发布
weixin_45600052的博客
11-05 835
一般登录成功后接口会返回该用户拥有哪些权限 例：menus: ['department', 'settings', 'permissions'] (此处list中的数据是路由的name，返回的具体内容和后端协商好就可以)路由一般分为 常量路由(所有人都可以访问)，动态路由(通过权限控制的路由)，任意路由(当访问的路由不存在时，跳转到的页面)在退出登录的时候需要重新创建一个新的路由实例，并使用新的路由实例覆盖老的路由实例。上面两张图一般后端接口返回的格式(封装的获取异步路由的方法是按照第二张图的数据封装的)
vue-element-admin根据后端返回，动态渲染左边菜单栏
m0_61702149的博客
06-10 2685
vue-element-admin左边菜单栏，根据后端返回，动态渲染
easyui后台管理系统（菜单权限，按钮权限）
12-10
在SpringMVC中，这通常通过拦截器实现，根据用户角色和权限信息动态生成可访问的菜单列表。 按钮权限进一步细化了控制粒度，允许系统对具体的操作进行授权。比如，一个用户可能有查看记录的权限，但无权编辑或删除...
用dtree生成后台管理菜单模板
05-05
在构建后台管理系统时，设计一个清晰、易用的菜单是至关重要的。`dtree` 是一个流行的前端插件，常用于生成树形结构的菜单，适用于后台管理界面。本篇文章将详细探讨如何利用 `dtree` 生成后台管理菜单模板，并结合 ...
easyui基本权限管理系统
02-20
EasyUI的菜单组件支持JSON数据源，开发者可以根据用户的角色权限动态生成JSON数据，从而控制菜单的显示。这样，用户只能看到他们有权访问的功能模块。 4. 权限校验 在页面加载或执行特定操作前，需要进行权限校验...
基于vue+thinkphp的后台管理系统，实现动态路由
01-18
在这个后台管理系统中，后端服务器（由ThinkPHP5.0驱动）将根据用户的登录状态和角色，返回相应的可访问路由列表。这样，前端（Vue.js）就可以根据这些路由信息动态构建菜单和页面，确保用户只能访问他们被授权的...
vue实现后台权限控制系统模板
06-01
在"Vue实现后台权限控制系统模板"这个项目中，我们可以理解这是一个基于Vue.js的后台管理系统的源码实现，旨在提供一套完整的后台权限管理解决方案。 首先，让我们详细探讨Vue.js在权限控制中的应用。Vue.js通过其...
根据后台返回路由表配置前端菜单
weixin_43120901的博客
05-31 3448
前言 本以为这个功能我2天就能做好，结果本大爷在公司都做了3天，再加上问我们领导和自己研究，花了四天时间。实际上这个不难，但是有很多细节要注意的，但是我们后台因为是其他项目的后台，他们之前前端用的不是vue-cli，所以返回的路由表数据并不是完整的路由表数据，但是跟我们前端还有一个key是匹配的，有这个key来连通后台数据和前端已有的路由表，就可以筛选出每个用户的权限。 理是这么个理，但是处理起来好多问题。 上代码 api/user.js----获取权限的接口 /** * * 获取菜单 */ expor
后端菜单接口
记录点点滴滴
11-20 1061
1.查询出菜单,根据用户发送过来的URL资源请求判断那些角色可以访问 2.根据当前用户登陆的角色和数据库里角色做个比对 例如 1.查询资源表id 7 的路径,对应的中间表7 - 6,查询到的是角色表的id 7系统管理员 2.根据用户表id 3管理员名字,对应的中间表是rid 6,查询出角色表id 6系统管理员 此优点:是没有在代码中写死,如果想改,可以到数据库修改权限 资源表 资源表和角色表 ...
根据后端返回的身份权限展示树状菜单
m0_63701303的博客
03-15 222
根据后端返回的身份权限展示树状菜单
你应该知道的后台权限分配
一位前行者的博客
02-27 857
前端权限控制的本质 一般说来，权限管理可以分为两种情况：     第一种为页面级访问权限。第一种情况是非常常见的，即用户是否能够看到页面；     第二种为数据级操作权限。第二种情况是用户能否对数据进行增删改查等操作。     这两种情况在实际的前端表现中都是一致的，即用户在正常页面中看不见，看不见就不能操作，所以进行了一次视觉上的隔离。在这里有的人可能会说：“你这不是自欺欺人吗？视觉隔离有什么用啊...
把页面生成出来放到项目里面，并把菜单配置到后台
fishermanMr
10-25 738
把页面生成出来放到项目里面 后端 生成的的sre放在放在module目录下 jeecg前端配置生成的表单页面 1.首先的先把表单生成的代码路径找到 2.找到包名下的vue，将它拷贝出来 3.在前端找到src-views 4.在里面建个包 5.然后把刚才找的的vue放到里面 6.把里面的modules包中带有Style#Drawer.vue的文件全部删掉 菜单配置 1.首先我们要先找到系统管理–菜单...
菜单栏根据后台数据自动生成
Fuyonghui123的博客
12-22 1967
最近遇到一个问题  需要给个人分权限查看不同的菜单 以前权限问题是定义一个数据库表 根据权限不同赋予不同的权限 从数据库获取菜单 比较灵活 所以就做了这个肯定有很多不足 希望可以和大家共同学习 技术：easyUi+spring+spingMvc+mybiatis 为什么要用easyui呢 因为简单易上手 而且他还有经典的三项布局 layout 这样可以省下自己很多的css布局 而且比较美观...
从后台数据生成菜单树（java）
weixin_33971205的博客
07-09 1019
第一次写博客，权当做笔记，自己也在学习java。有不对的，欢迎指正。 1.首先是mysql的菜单表，我命名为： sys_menu(在此需要注意，一般数据库的命名和字段类型都采用小写) 2.以下是详细的数据库建表： /* Navicat MySQL Data Transfer Source Server : ************** Source Server Version...
Vue后台管理系统权限管理实现路由完全后端返回菜单动态渲染
weixin_56611064的博客
06-02 5277
后台管理系统项目中的路由需要权限管理，不同的角色登录看到的页面是不一样的，所以路由应该是后端动态返回，然后前端拿到路由表进行处理后调用router.add
根据后端返回数据动态生成不同的按钮
06-09
好的，针对你的问题，我们可以通过使用Vue.js的v-for...在组件创建时，我们调用后端接口获取按钮数据，并且将数据赋值给组件的buttons属性，然后通过v-for指令循环渲染按钮，实现根据后端返回数据动态生成不同的按钮。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值