vue后台系统路由菜单动态权限控制

需求：

现有一个后台管理系统，涉及到用户权限菜单的问题，即不同的用户登录，根据权限的不同展示不同的菜单。

回答：

实现思路

第一种方法： 动态添加路由，将完整路由整合到一起，并从路由表中提取出菜单；
1、先将不需要权限（静态）的页面先挂载到new Router路由实例上，并export出去。
2、当用户登录后，获取用户的权限信息，然后根据用户的权限（role或某个标识）调后端接口取到路由表。
3、调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由（注意：这里有个hack方法  next({ ...to, replace:true}) // hack方法 确保addRoutes已完成 ,setthe replace:trueso the navigation will not leave ahistoryrecord })
4、将所有的路由表存到根标签内（也有将路由表存到vuex里，根据vuex中的路由表来渲染菜单）

第二种方法：将路由和菜单分开，前端完全控制路由，菜单从后端获取。
1、前端控制整个系统的完整路由，自行进行增减路由表。
2、根据用户权限调后端接口获取可访问的菜单列表，并根据数据规则进行重组。
3、将获取的菜单数据列表Array绑定到菜单SideBar上，渲染侧边栏组件 。

值得说明的是，这些页面级别的权限控制，虽然已经在前端做了，但是只在前端做是不够的，后端也依然要做接口层面的权限控制。