Ant Design讲解

Ant-Design-Pro详情

ant-design-pro安装

https://pro.ant.design/zh-CN/ pro 的官网网址

使用 yarn create umi 创建的项目 选择ant design pro 模板后，创建的项目模板比较少，我们可以使用ant-desigin pro官网上给的脚手架去创建项目

cnpm i @ant-design/pro-cli -g  
### 进入目录创建项目
pro create myappPro  

//可以选择umi3或者umi4的版本

cd myappPro && cnpm i ###进入目录安装项目的依赖

github或者gitee下载.

ant-design-pro代码流程分析

package.json文件

npm run dev 设置dev环境变量，关闭mock 无法使用pro给我们提供的mock数据了

npm start 启动环境，没有关闭mock数据，我们还可以请求mock提供的登录接口数据等等

如果我们开始自己写接口数据，npm run dev 开启即可。

ant-pro的目录结构

登录相关的权限

1. 登录后端的话，定义管理后台的用户表，用户名，密码，昵称，头像

菜单相关的权限

登录流程分析功能

1. 完成登陆的流程： Pages/user/index.ts. 执行登陆请求的api  ==>. service/ant-desgin-pro/api 登陆的api接口 -->mock的登陆	 接口返回成功的数据
2. 用户登陆成功后，调用app.tsx中初始化中的请求用户详情的api接口方法，
	 登陆页面 ==> app.tsx运行时配置文件getInitState方法 ==> api.ts请求用户详情接口方法 currentUser方法，完成接口的请求
   
3. 请求用户成功的数据挂载到运行时配置的初始化数据上了

左侧菜单权限

1. 登陆成功后，根据登陆的用户获取用户访问权限的角色信息，
2. 获取用户详情接口的时候，把角色信息赋给用户详情的access属性，作为access.ts权限文件的判断条件信息。
	 基于角色的菜单管理信息。

RBAC权限管理

基于角色的权限控制系统

用户表 角色表 菜单表 用户角色表 角色菜单表；后台有五张表。

用户登陆成功后，可以通过用户找到所有的角色，通过角色找到所有的权限菜单。

把用户的基本信息，角色，拥有的路由菜单信息封装成对象返回给前端。

前端可以根据菜单进行比较，渲染左侧菜单

判断当前访问的页面是否在权限菜单中，如果在正常访问，如果不在直接跳转到403页面

antd-pro高级表单

https://pro.ant.design/zh-CN/docs/overview/ 参考网址