zoukankan      html  css  js  c++  java
  • 后台返回路由的数组,然后根事先写好的路由比对如果相等就放到一个数组中https://www.cnblogs.com/zhengrunlin/p/8981017.html

    https://www.cnblogs.com/zhengrunlin/p/8981017.html

    首先,await fetchPermission()获取后台给的权限数组,格式大概如下
    {
        "code": 0,
        "message": "获取权限成功",
        "data": [
            {
                "name": "订单管理",
                "children": [
                    {
                        "name": "订单列表"
                    },
                    {
                        "name": "生产管理",
                        "children": [
                            {
                                "name": "生产列表"
                            }                     
                        ]
                    },
                    {
                        "name": "退货管理"
                    }
                ]
            }
        ]
    }
    其次根据我们写好的路由数组,进行对比,过滤得到我们要的路由
    /* 这里是我们写好的需要权限判断的路由 */
    const dynamicRoutes = [
        {
            path: '/order',
            component: Order,
            name: 'order-manage',
            meta: {
                name: '订单管理'
            },
            children: [
                {
                    path: 'list',
                    name: 'order-list',
                    component: OrderList,
                    meta: {
                        name: '订单列表'
                    }
                },
                {
                    path: 'product',
                    name: 'product-manage',
                    component: ProductManage,
                    meta: {
                        name: '生产管理'
                    },
                    children: [
                        {
                            path: 'list',
                            name: 'product-list',
                            component: ProductionList,
                            meta: {
                                name: '生产列表'
                            }
                        },
                        {
                            path: 'review',
                            name: 'review-manage',
                            component: ReviewManage,
                            meta: {
                                name: '审核管理'
                            }
                        }
                    ]
                },
                {
                    path: 'returnGoods',
                    name: 'return-goods',
                    component: ReturnGoods,
                    meta: {
                        name: '退货管理'
                    }
                }
            ]
        }
    ]
    
    export default dynamicRoutes
    为了对比,我写好了一个递归函数,用name和meta.name进行对比 ,根据这个函数就可以得到我们想要的结果
    
    /**
     *
     * @param  {Array} userRouter 后台返回的用户权限json
     * @param  {Array} allRouter  前端配置好的所有动态路由的集合
     * @return {Array} realRoutes 过滤后的路由
     */
    
    export function recursionRouter(userRouter = [], allRouter = []) {
        var realRoutes = []
        allRouter.forEach((v, i) => {
            userRouter.forEach((item, index) => {
                if (item.name === v.meta.name) {
                    if (item.children && item.children.length > 0) {
                        v.children = recursionRouter(item.children, v.children)
                    }
                    realRoutes.push(v)
                }
            })
        })
        return realRoutes
    }
    得到过滤后的数组后,加入到path为''的children下面
    
    {
            path: '',
            component: Layout,
            name: 'container',
            redirect: 'home',
            meta: {
                requiresAuth: true,
                name: '首页'
            },
            children: [
                {
                    path: 'home',
                    component: Home,
                    name: 'home',
                    meta: {
                        name: '首页'
                    }
                },
                <!-- 将上面得到的东西加入到这里 -->
                ...
            ]
        }
    

      

  • 相关阅读:
    闭包总结
    执行上下文总结
    下拉列表
    练习 九九乘法表
    JavaScript中break和continue的区别
    JaveScript遍历数组的方法
    将一个块级元素水平和垂直居中的方法
    ECMAScript 中最常见的一个问题是字符串连接的性能
    JS 一些题目 难点
    JS闭包
  • 原文地址:https://www.cnblogs.com/qianjin888/p/9227152.html
Copyright © 2011-2022 走看看