zoukankan      html  css  js  c++  java
  • vue前后分离动态路由和权限管理方案

    需求

    需要根据不同的角色来显示不同的菜单

    问题

    系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理。

    思路

    • 后端的接口肯定得验证权限
    • 在前端做好组件名和组件的映射
    • 前端的路由通过后端发回的json动态生成,对于比较细粒度的可以通过css来控制和隐藏

    方案

    使用vue-router的router.addRoutes(routes)来动态生成路由。

    注意事项

    vue-router 是按照路由表里的顺序来查找路由的,如果你的404页面在动态添加的路由前面,则需要把404路由单独移出来,最后再添加。

    示例代码

    
    const Hello =
    {
        template : '<div>哈哈哈</div>'
    }
    
    const page404 =
    {
        path : '/*',
        name : 'error_404',
        meta :
        {
            title : '404-页面不存在'
        },
        component : resolve =>
        {
            require(['./views/error_page/404.vue'], resolve);
        }
    };
    
    const router = new VueRouter();
    
    //组件名和组件的映射
    let comsMap =
    {
        "hello" : Hello
    }
    
    let resData = '[{"name":"首页","path":"/index","component":"hello"}]'; //表示从接口返回的数据
    
    function paraseRouter(routerJson, router)
    {
    
        let dynamicRouters = [];
    
        JSON.parse(routerJson).forEach(r=>{  
           
            dynamicRouters.push(
            {
                path : r['path'],
                component : comsMap[r['component']],
                name : r['name']
    
            }
            )
        });  
    
        dynamicRouters.push(page404)
    
        router.addRoutes(dynamicRouters)
    
    }
    
    paraseRouter(resData,router);
    
    
  • 相关阅读:
    DS博客作业06--图
    DS博客作业05--树
    DS博客作业03--栈和队列
    DS博客作业02--线性表
    DS博客作业01--日期抽象数据类型设计与实现
    C语言博客作业06--结构体&文件
    c语言博客作业05--指针
    C语言博客作业03--函数
    DS博客作业--课程总结
    DS博客作业07--查找
  • 原文地址:https://www.cnblogs.com/xdao/p/vue_dynamic_router.html
Copyright © 2011-2022 走看看