vue：根据后台传来的值生成路由（动态路由）的实现方案

Question

公司要做一个后台管理系统，然后可能不同的角色对应着不同的左侧菜单，也就是个动态路由，每个人能看到的东西不一样。
我之前看过“花裤衩”大神的文档，就是后端返回用户角色，然后前端根据用户角色来动态控制路由，现在想让后台直接返回数据，然后根据数据去渲染
后台返回类似的数据：

然后用addRoutes方法实现
我想问问大家有没有这样搞过，这样做的话是否合理一点，或者大家有没有已经实践过的方案，希望大家能提出来一点意见

Answer 1

刚入vue没多久，所以对有些东西一知半解，谢谢大家的意见，结合每个回答者的思路，决定这么一种实现方式1.登录成功跳转的时候，做路由拦截router.beforeEach,这时候去请求后台数据，返回来该用户对应的整个路由列表2.跟原来写死的几个不用权限的路由concat起来，在用router.addRoutes方法，实现最终要呈现的路由3.当然，会有组件去遍历最终的生成routes路由，生成左侧边栏我会把实际用到的时候发现的坑分享出来，前端小学生谢谢大家

Answer 2

前面几楼都已经把思路说出来了，基本就是先正常写路由，再根据权限判断是否展示给用户。我补充一个实践的把。把左侧栏封装成一个组件，比如nav：2.不同用户传入不同的数据，通过props传值到组件内部，细节再自己进行处理。

Answer 3

我之前看过“花裤衩”大神的文档，就是完全前端控制，现在想让后台直接返回数据，然后根据数据去渲染问题完全就是前端控制？ 没看懂你的意思。他的逻辑也是后台回来权限数据，然后处理成vue-router需要的数据格式动态add上去。至于为什么他的demo上是写死，因为没有后台服务，数据都是mock的。跟你说的 让后台返回数据再根据数据渲染有什么不同？

Answer 4

后台控制应该是挺好的，灵活性好，数据驱动嘛

Answer 5

将左侧菜单封装成一个组件 然后通过后台数据来控制菜单的展示。

Answer 6

两个方案。方案一，路由全部权限注册，动态获取可显示的导航id，为防止用户直接地址栏输入，加路由拦截器。方案二，严格按照权限注册路由，在vue实例化之前，异步获取可注册路由，再实行注册

Answer 7

其实就是权限管理的部分，不同用户对应的菜单可能不同，左侧菜单栏菜单显示项不同。左侧封装组件，数据通过后端处理，返回不同的菜单项。

Answer 8

请问component的值，后台用什么方式传过来

Answer 9

方案：一：用户组管理页面，与左侧到导航管理页面（tree控件，在添加或编辑时可以允许当期那是否显示）二：用户组里对应用户组权限分配功能，打开可以看到导航管理页面数据（采用tree拉出数据），选择对应的权限赋给用户组三：后台根据当前用户组的权限，返回对应的数据四：左侧导航生成

Answer 10

一般的后台管理系统中都会有这样的需求1、可以配置角色，每个角色有不同的菜单权限，数据存在数据库中2、创建用户的时候为用户分配角色3、用户登录页时后台返回菜单权限（读取）4、前端根据权限数据渲染菜单前提如楼上几位所说前端也需要与完整的路由映射