antd pro4-(1)摸黑前行_antdpro 获取当前用户是啥意思-优快云博客

本文深入解析Ant Design Pro框架的使用，从下载安装到理解配置式路由，详细介绍了用户登录流程，包括SecurityLayout的权限校验机制，以及如何通过Action和Service获取与管理用户信息。探讨了BasicLayout的菜单生成策略，为开发者提供了一条清晰的学习路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的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