最近需要做个后台,需要做权限管理。百度谷歌半天,实在没找到什么好的轮子,那就只能自己研发了!
按照传统的MVC方式开发,从服务器渲染HTML页面倒是服务器随便处理下就行了,但是现在前端这么火,MVVM工具比较多,对于复杂数据处理有优势,为了后期能力更强,自然就选择MVVM框架,这里选Ant Design Pro这个ReactJS的admin框架。
需求:后台动态控制用户的权限
按照这些前端框架自带的权限控制逻辑,实在是不能满足一个高级分权后台的需求,前端的路由、链接都是写死的。当然,我们在前台就只能把菜单渲染这项变成异步加载的,如果把MVVM框架的所有东西变成动态,那还不如用服务端模板引擎了,这就失去前后端分离框架的效率了。
设计思路:
仅仅是前台做权限,判断路由做个拦截,那不仅是不灵活还不安全。
![7fdf20834cfe2879df4fa8ea1530ba40.png](https://i-blog.csdnimg.cn/blog_migrate/2b14c2901c320559f9fb4dbd076564ff.jpeg)
按照ant-design-pro提供的权限控制(其它大多数MVVM框架也差不多),如果你用户分组灵活调整,那么这些js文件通常只能写死。
按照我们安浪创想技术团队的鉴权逻辑,即把前端的路由都注册到数据库,后台的API接口也注册到数据库。(本文只是记录下ant-design-pro 2.2.1前台的动态菜单设置方法,不介绍后台的逻辑和开发,如果有需要技术项目开发可以联系我)
先根据登录用户获取该用户能访问的前端路由(返回树形菜单数据接口),异步加载后渲染到前端页面。
然后当用户在所获得的前端路由页面,访问服务器api接口时,再由服务器进行api的访问权限鉴权。
由此就可以做到后台对MVVM权限的动态管理,不同用户,不同角色登录获得的界面就不同了,且管理员还可以随时无限制修改这个结构。
ant-design-pro动态权限,按照官方文档
![7815a0cb42fd3e328f966f5d2356661e.png](https://i-blog.csdnimg.cn/blog_migrate/20bdd91ff441a45f1d01435d553cf02f.jpeg)
文件位置
![f5bbff6e007948c72fbacc46f8f23b5c.png](https://i-blog.csdnimg.cn/blog_migrate/5fed91b0f2b2957e6741bd7df43b7ff6.jpeg)
修改实现服务器异步加载:
- 添加一个api请求服务
假设我们后台返回的菜单结构为:
![98e8d6a7054c7f4c9812368b6ed29b35.png](https://i-blog.csdnimg.cn/blog_migrate/4afee4bdaec28124d1e59ebb879191fa.jpeg)
这里我们先放到一个模拟请求地址做演示
![afe37a8df7a0774ec98eb73156bc1bb1.png](https://i-blog.csdnimg.cn/blog_migrate/3eafbfbd317332e857978874e1952adc.jpeg)
编写api请求函数
![f6111f10eb399e0e8784b25ae92a7bfc.png](https://i-blog.csdnimg.cn/blog_migrate/5fbbbd8c99cec58e08f5f9fc800d3995.jpeg)
- 在model获取数据和设置state
先在src/model/menu.js 引入请求函数
![da1e6b37128c979dd78772387897d526.png](https://i-blog.csdnimg.cn/blog_migrate/a7fb64d4323e1421efb6dd4a3ab3b9ad.jpeg)
修改数据操作
![e0fd63af52d975116797d2e3fed5273a.png](https://i-blog.csdnimg.cn/blog_migrate/7badc2f36bf233768157ca263c0f189f.jpeg)
- 完成修改
代码下载:https://gitee.com/jiankian/ant-design-pro-dynamic-menu