开发项目的时候,当后端api已经写好的情况下,开始开发前端的时候,一定是先新建菜单、权限节点等
权限节点的类型说明
- 菜单目录:就是左侧菜单中的目录
- 菜单:就是左侧菜单中可点击的菜单
- 外部链接菜单:就是左侧菜单中的外链
- iframe:左侧菜单中的iframe的页面
- 内页菜单权限:重点,市面上react或者vue项目,特别是在后台多tabs标签的时候,在打开详情(或者所谓的二级页面、三级页面...)的时候都是用弹窗打开,而本项目可以用新页面打开,如订单列表》订单详情,在打开订单列表的时候会新增一个
订单列表
的tabs标签,在订单列表在打开进入订单详情
的时候,系统并不会在新建一个订单详情的tabs标签,而是把页面打开在订单列表
这个tabs标签中(因为从路由关系已经知道订单详情是订单列表的下级),直接使用react router直接跳转详情就行,在整个项目任何地方都可以使用react router直接跳转有权限的任何页面,如当前并没有打开订单列表
这个tabs标签,而在一个其它任何页面中跳转到某个订单详情,此时tabs标签会新建一个订单列表
而在这里面打开订单详情(智能之处)。 - 按钮权限:就是页面中一些操作的权限,如新建、删除、状态切换等
自动生成菜单的下级权限节点
比如新建一个表adminUser,有一个管理的列表页,有添加、修改、查看详情、删除、修改状态、修改排序、导入数据、导出数据等操作,那么权限节点这最少要手动新建8次数据,太麻烦了,所以新建的时候在选择菜单的时候,可以选择自动生成当前菜单的下级权限节点,已经内置了(只浏览数据、添加、修改、查看详情、删除、修改状态、修改排序、导入数据、导出数据)这几种权限节点,并且在有选择添加或修改的时候可选择生成的权限是弹窗操作还是新页面操作,在选择有查看详情的时候也可选择是弹窗还是新页面。
权限标识是按照以下规则生成,如果当前生成的菜单权限标识为:adminUser
权限名称 | 权限节点标识 | 类型 |
---|---|---|
列表页 | adminUser | 菜单 |
列表页>只浏览数据 | adminUserGetList | 按钮权限 |
列表页>添加 | adminUserCreate | 按钮权限 或 新页面打开,新页面的话页面地址和组件地址就是:/adminUser/create |
列表页>修改 | adminUserUpdate | 按钮权限 或 新页面打开,新页面的话页面地址和组件地址就是:/adminUser/udpate |
列表页>查看详情 | adminUserInfo | 按钮权限 或 新页面打开,新页面的话页面地址和组件地址就是:/adminUser/info |
列表页>删除 | adminUserDelete | 按钮权限 |
列表页>修改状态 | adminUserUpdateStatus | 按钮权限 |
列表页>修改排序 | adminUserUpdateSort | 按钮权限 |
列表页>导入数据 | adminUserImportData | 按钮权限 |
列表页>导出数据 | adminUserExportData | 按钮权限 |
TIP
注意:代码生成器里面生成的前端代码中的增、删、改、查、导入...等权限标识,以及后端代码中的接口级别的权限验证标识,也是按照以上表中的规则自动生成并加入
菜单的图标说明
整个项目中,只有菜单的图标是使用的阿里图标,并且是将图标下载后放到src/static/iconfont
中,其它任何页面中使用的图标都是使用Ant Design的Icon
由于所在公司需要开发多个项目,所以每个项目的iconfont是不同的,建议大家将项目搭建好后,也去https://www.iconfont.cn/新建一个项目,然后下载到本地覆盖掉src/static/iconfont
的文件,然后编辑每个权限节点
的数据编辑每个图标,这样才能自己控制项目中菜单的图标
TIP
1、阿里图标新建项目示例,只需要TTF
的字体格式即可
2、项目新建好后,添加自己需要的图标到项目中,然后下载到本地直接把所有文件丢到src/static/iconfont
中进行覆盖,使用的话选择Font Class
,直接复制到我们的权限节点中的阿里云图标输入框
即可