vue实现动态导航菜单权限

Question

提问：前端使用了vue加ant-design-vue开发，现阶段需要开发一个权限管理功能，之前没有接触过这方面的东西，想请教一下。
我看了网上实现的菜单权限管理，分两种:一种是前端控制，一种是后端控制。我需要实现的是由后端控制前端渲染。前端需要使用到vuerouter的导航守卫beforeEach,动态添加路由addRoutes。
而我应该如何使用这些方法，触发的时机又是什么时候？什么时候获取路由表信息最合适？我应该如何组合后台传过来的路由？如何控制导航菜单的显示和隐藏，导航菜单中的url我应该获取本地的路径还是什么？求指教，谢谢。

Answer 1

后端传一个过滤权限后的菜单数据给前端，前端渲染菜单就可以了，比如：

// router List
var routerList = [
    {name:'首页'， url: '/home'},
    {name: 'xxx', url: '/xxx'}
]

接着v-for渲染菜单。

或者是后端给你所有菜单，你自己判断是否可以渲染,

// router List
var routerList = [
    {name:'首页', hasAuth: true, url: '/home'},
    {name: 'xxx', hasAuth: false, url: '/xxx'}
]

// hasAuth 为false,就用v-if隐藏

Answer 2

与后端约定好权限渲染的路由，例如a登陆显示homepage editpage，b登陆显示homepage viewpage，则你通过拿到的是字段对应处理渲染菜单和路由。此为后端渲染

Answer 3

后端搞定就可以了。你在mounted方法里面调用ajax获取菜单就可以了，让后端把没有权限的直接过滤掉就可以了，你不需要处理什么，ajax拿出来直接展示，菜单的url应该是你vue的路由地址