使用的antd pro版本4.0。
它使用的技术栈比较多,大略看了下官网。
推荐教程必须是这个Ant Design 实战教程
Pro的相关资料相对较少,
自己属于这方面小白,看–>抄–>改–>写。
先看看下载下来antd pro,还未获取全部区块。
配置式路由,瞅一瞅config/config.js
路由用到的布局
- 用户登录 …/layouts/UserLayout
- 权限校验 …/layouts/SecurityLayout
- 基本布局 …/layouts/BasicLayout
SecurityLayout
校验用户是否登录,没有则跳转登录。
在组件渲染之后,componentDidMount()里,发起了了Action获取当前用户信息:
user/fetchCurrent
—> 调用Service: user.queryCurrent
—> 发送请求获取: /api/currentUser
—> mock 返回json数据
运行后访问,直接进入主页面,而不需要登录。在componentDidMount()发起Action获取用户可是为了方便演示吧
conect中, { user, loading } , user 从 models中获取,当用户 dispatch 对应 effect 时,dva 会自动注入对应 effect 的 loading
UserLayout
获取title,渲染。
渲染SelectLang,国际化的东西,可以选择当前语言的组件。
然后就是渲染{this.props.children} , 也就是./user/login组件
connect 把settings带过来做什么用的?
继续看一下./user/login
渲染用户名密码等组件,提交的时候发起了Action: login/login
—>models/login.js处理, 其中调用service
—>services/login.js处理,发起request:/api/login/account
—>mock/user.js处理,返回类似格式:
{
status: 'ok',
type,
currentAuthority: 'admin',
}
—>models/login.js 调用完service后后变更state, 使用localStorage存放权限信息,跳转请求。
localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));
BasicLayout
使用useEffect发起了了Action获取当前用户信息: user/fetchCurrent
根据据子路由所需的权限,来生成菜单栏。
其中用到了ProLayout, Authorized等, 后续实现权限和菜单的时候再研究。
参考:官方ProLayout