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

需求：

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

回答：

实现思路

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

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

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