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. 完成登陆的流程： 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页面
