vue根据权限生成侧边导航

如何根据这个账号的权限生成侧边栏呢？
首先还是要根据后台返回的权限列表来进行生成
循环该角色的菜单列表然后生成导航条

<el-menu
                      :default-active="$route.path"
                      class="el-menu-vertical-demo"
                      background-color="#545c64"
                      text-color="#fff"
                      active-text-color="#409EFF"
                      router
                      style="height: 100vh"
              >
                  <!--左导航-->
                  <el-submenu v-for="(item,index) in menuList" :key="index" :index='item.id'>
                      <template slot="title">
                          <i :class="item.icon"></i>
                          <span>pw_item.title</span>
                      </template>
                      <el-menu-item-group >
                          <el-menu-item v-for="child in item.children" :key="child.id" :index='child.index'>
                              pw_child.childTitle
                          </el-menu-item>
                      </el-menu-item-group>
                  </el-submenu>
              </el-menu>

这次是直接使用的elementUI的侧导航组件来实现的
首先就是循环一级菜单el-submenu
然后再循环二级菜单el-menu-item,其中index属性是跳转的路径
这样需要循环的数据结构如下：

menuList:[
                    {
                        id:'1',
                        title:"患者管理",
                        icon:'el-icon-user',
                        children:[
                            {
                                index:'/index/HzMap',
                                childTitle:'患者地图',
                            },
                            {
                                index:'/index/HzList',
                                childTitle:'患者列表',
                            },
                            {
                                index:'/index/HzBuLiang',
                                childTitle:'不良反应提示',
                            },
                        ]
                },
                {
                    id:'2',
                    title:"医院信息管理",
                    icon:'el-icon-user',
                    children: [
                        {
                            index:'/index/HospialGuanLi',
                            childTitle:'医院管理',
                        },
                        {
                            index:'/index/DoctorGuanLi',
                            childTitle:'医生管理',
                        }
                    ]
                },
                {
                    id:'3',
                    title:"患教活动管理",
                    icon:'el-icon-user',
                    children:[
                        {
                            index:'/index/HuanJiaoGuanLiChildren',
                            childTitle:'患教活动管理',
                        }
                    ]
                },
                {
                        id:'4',
                        title:"病历探讨管理",
                         icon:'el-icon-user',
                        children:[
                            {
                                index:'/index/BingLiGuanLiChildren',
                                childTitle:'病历探讨管理',
                            }
                        ]
                },
                    {
                        id:'5',
                        title:"参数配置",
                        icon:'el-icon-user',
                        children:[
                            {
                                index:'/index/HospitalCanShuPeiZhi',
                                childTitle:'参数配置',
                            }
                        ]
                    },
                {
                        id:'6',
                        title:"交易信息统计",
                         icon:'el-icon-user',
                        children:[
                            {
                                index:'/index/JiaoYiGuanLIChildren',
                                childTitle:'交易信息统计',
                            }
                        ]
                },
                {
                        id:'7',
                        title:"首页BANNER管理",
                         icon:'el-icon-user',
                        children:[
                            {
                                index:'/index/BannerGuanLiChildren',
                                childTitle:'首页BANNER管理',
                            }
                        ]
                },
                {
                        id:'8',
                        title:"二维码管理",
                    icon:'el-icon-user',
                        children:[
                            {
                                index:'/index/ErWeiMaGuanLiChildren',
                                childTitle:'二维码管理',
                            }
                        ]
                },
                {
                        id:'9',
                        title:"充值管理",
                    icon:'el-icon-user',
                        children:[
                            {
                                index:'/index/ChongZhiGuanLiChildren',
                                childTitle:'充值管理',
                            }
                        ]
                },
                ]

有些时候后台返回的结构和键名不是一样的，这就需要自己写一个适配器来匹配结构和键名
当然，下面这个方法仅仅是针对这次后台返回的数据进行的一个适配，不是针对于所有情况

var loginMsg = JSON.parse(localStorage.getItem('loginMsg'))//获取的权限数据
            var mnList = []
            var pushObj = {}
            var pucArr = []
            var pucObj = {}
            var mtpototype = loginMsg.role[0].menus
            console.log(mtpototype);
            var len = 0
            if(mtpototype[mtpototype.length-1].menuId == 1){
                len = mtpototype.length-1
            }
            else {
                len = mtpototype.length
            }
            for(let i = 0;i<len;i++){
                console.log(mtpototype.length - 1);
                if(mtpototype[i].menus.length>0){
                    for(let x = 0 ;x<mtpototype[i].menus.length;x++){
                        pucObj ={}
                        console.log(1);
//                        console.log(mtpototype[i].menus.length);
                        pucObj.index = mtpototype[i].menus[x].url
                        pucObj.childTitle =mtpototype[i].menus[x].menuNamezh
                        pucArr.push(pucObj)
                    }
                }
                else {
                    pucObj ={}
                    pucObj.index = mtpototype[i].url
                    pucObj.childTitle = mtpototype[i].menuNamezh
                    pucArr.push(pucObj)
                }
                pushObj={}
                pushObj.id = mtpototype[i].menuId
                pushObj.title = mtpototype[i].menuNamezh
                pushObj.icon = 'el-icon-user'
                pushObj.children = pucArr
                pucArr=[]
                mnList.push(pushObj)
            }
            console.log(mnList);
            this.menuList = mnList
        },