ant design pro 5_ant-design-pro v2动态设置菜单（用于MVVM模式前后端用户权限）

最近需要做个后台，需要做权限管理。百度谷歌半天，实在没找到什么好的轮子，那就只能自己研发了！

按照传统的MVC方式开发，从服务器渲染HTML页面倒是服务器随便处理下就行了，但是现在前端这么火，MVVM工具比较多，对于复杂数据处理有优势，为了后期能力更强，自然就选择MVVM框架，这里选Ant Design Pro这个ReactJS的admin框架。

需求：后台动态控制用户的权限

按照这些前端框架自带的权限控制逻辑，实在是不能满足一个高级分权后台的需求，前端的路由、链接都是写死的。当然，我们在前台就只能把菜单渲染这项变成异步加载的，如果把MVVM框架的所有东西变成动态，那还不如用服务端模板引擎了，这就失去前后端分离框架的效率了。

设计思路：

仅仅是前台做权限，判断路由做个拦截，那不仅是不灵活还不安全。

按照ant-design-pro提供的权限控制(其它大多数MVVM框架也差不多)，如果你用户分组灵活调整，那么这些js文件通常只能写死。

按照我们安浪创想技术团队的鉴权逻辑，即把前端的路由都注册到数据库，后台的API接口也注册到数据库。(本文只是记录下ant-design-pro 2.2.1前台的动态菜单设置方法，不介绍后台的逻辑和开发，如果有需要技术项目开发可以联系我)

先根据登录用户获取该用户能访问的前端路由(返回树形菜单数据接口)，异步加载后渲染到前端页面。

然后当用户在所获得的前端路由页面，访问服务器api接口时，再由服务器进行api的访问权限鉴权。

由此就可以做到后台对MVVM权限的动态管理，不同用户，不同角色登录获得的界面就不同了，且管理员还可以随时无限制修改这个结构。

ant-design-pro动态权限，按照官方文档

文件位置

修改实现服务器异步加载：

1. 添加一个api请求服务

假设我们后台返回的菜单结构为：

这里我们先放到一个模拟请求地址做演示

编写api请求函数

1. 在model获取数据和设置state

先在src/model/menu.js 引入请求函数

修改数据操作

1. 完成修改

代码下载：https://gitee.com/jiankian/ant-design-pro-dynamic-menu