上犹电脑信息网我们一直在努力
您的位置:上犹电脑信息网 > 设置问题 > ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)-菜单设置

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)-菜单设置

作者:上犹日期:

返回目录:设置问题

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

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

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

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

设计思路:

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

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

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

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

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

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

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

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

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

文件位置

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

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

  1. 添加一个api请求服务

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

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

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

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

编写api请求函数

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

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

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

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

修改数据操作

ant-design-pro v2动态设置菜单(用于MVVM模式前后端用户权限)

  1. 完成修改

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

相关阅读

关键词不能为空
极力推荐

电脑蓝屏_电脑怎么了_win7问题_win10问题_设置问题_文件问题_上犹电脑信息网

关于我们