vue前后分离动态路由和权限管理方案

Posted 半山

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);

以上是关于vue前后分离动态路由和权限管理方案的主要内容,如果未能解决你的问题,请参考以下文章

vue项目权限管理

前后端分离后的权限控制设计​方案

SpringBoot+Vue+AntDesign前后端分离解决方案

SpringBoot+Vue+AntDesign前后端分离解决方案

Vue前后端动态权限管理对接方案

前后端分离开发中动态菜单的两种实现方案