Spring WebFlux + React搭建后台管理系统（3）: antd pro v5实现登入登出

泛泛之素

于 2020-08-28 14:26:56 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：后台项目 react umi

本文链接：https://blog.csdn.net/tonydz0523/article/details/108278854

本文介绍了如何使用Spring WebFlux与antd pro v5搭建后台管理系统，包括创建antd pro v5项目、实现登录与登出功能，并提供了相关代码示例。在登录实现中，详细讲述了修改登录页面、添加API服务、调整getInitialState方法、修改CurrentUser以及鉴权逻辑的过程。登出功能则相对简单，主要涉及删除用户信息和token。

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

antdpro是蚂蚁金服开发的后台管理框架模板，继承了许多组建，可以满足快速开发，组建使用的antd，组建种类比较多，功能比较全，设计也挺好看的，但是封装程度有点高，用起来可能不是很灵活，一些功能需要研究一下。

1. 创建antd项目

官方创建项目说明

1.1 命令行键入：

yarn create umi

在这里插入图片描述

1.2 选择Pro v5：

在这里插入图片描述

这时项目文件全部拉下来了：
在这里插入图片描述

1.3 下载依赖

通过yarn下载，时间会比较长

yarn

在这里插入图片描述

1.4 运行项目

通过键入yarn start启动项目

在这里插入图片描述

通过浏览器访问，不要用ie，可见项目界面：

在这里插入图片描述

2. 登入实现

由于使用initialState， v5的login和v4的login的一些文件功能位置发生了变化，之前用的dva，现在也没了。

2.1 修改login的页面

找到login的页面以及功能页面

在这里插入图片描述

登录页面修改：只需要用户密码登录

const Login: React.FC<{
   
   }> = () => {
   
   
  const [userLoginState, setUserLoginState] = useState<API.LoginStateType>({
   
   });
  const [submitting, setSubmitting] = useState(false);

  const {
   
    refresh} = useModel('@@initialState');

  const handleSubmit = async (values: LoginParamsType) => {
   
   
    setSubmitting(true);
    try {
   
   
      // 登录
      const msg = await accountLogin({
   
    ...values,  type: 'account'