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

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

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

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

设计思路:

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




ant design vue table 悬停颜色 ant design vue 动态菜单_动态菜单


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

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

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

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

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

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


ant design vue table 悬停颜色 ant design vue 动态菜单_异步加载_02


文件位置


ant design vue table 悬停颜色 ant design vue 动态菜单_MVVM_03


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

  1. 添加一个api请求服务

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


ant design vue table 悬停颜色 ant design vue 动态菜单_服务器_04


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


ant design vue table 悬停颜色 ant design vue 动态菜单_动态菜单_05


编写api请求函数


ant design vue table 悬停颜色 ant design vue 动态菜单_异步加载_06


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

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


ant design vue table 悬停颜色 ant design vue 动态菜单_MVVM_07


修改数据操作


ant design vue table 悬停颜色 ant design vue 动态菜单_MVVM_08


  1. 完成修改