Umi从零搭建Ant Design Pro项目（2）

前言

前面写了创建项目及修改一些配置。这一章写写登录页面。

一、新增登录页面

新增登录页面，会涉及Umi的目录结构。先看一下文档再动手。

1.登录页面代码

// src/pages/user/login.tsx
import {
  LockOutlined,
  MobileOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginForm,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import { Divider, Space, Tabs, message } from 'antd';
import { useState } from 'react';
import { history,useModel } from '@umijs/max';
import { login } from "@/services/demo/UserController"; //该处代码下面见
import { flushSync } from 'react-dom'; //强刷新一下

type LoginType = 'phone' | 'account'; //看字面意思就可以了

export default () => {
  const items = [
    { label: '账户密码登录', key: 'account' },
    { label: '手机号登录', key: 'phone' },
  ];
  const [loginType, setLoginType] = useState<LoginType>('account');
  const { initialState, setInitialState } = useModel('@@initialState'); //注意一下，后面解释

  //写一个获取用户信息的函数
  const fetchUserInfo = async () => {
    const userInfo = await initialState?.fetchUserInfo?.(); //出现initialState了，后面解释
    if (userInfo) {
      flushSync(() => {
        setInitialState((s) => ({
          ...s,
          currentUser: userInfo,
        }));
      });
    }
  };

  const onSubmit = async (formData: API.LoginParams) => {
    try {
      const success = await login({ ...formData });
      if (success) {
        message.success("登录成功");
        await fetchUserInfo(); //调用获取用户信息函数
        history.push('/');
      }else{
        message.error("登录失败");
      }      
    }catch (error:any) {
      if(error.response){
        message.error(error.response.data.message);
      }else{
        message.error("未知错误");
      }
      
    }

  };
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100vh',
        overflow: 'auto',
        backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
        backgroundSize: '100% 100%',
      }}
    >
      <LoginForm
        onFinish={onSubmit}
        title="AntDesgin Pro"
        subTitle="基于Umi从零搭建Ant Desgin Pro"

      >
        <Tabs
          centered
          items={items}
          activeKey={loginType}
          onChange={(activeKey) => setLoginType(activeKey as LoginType)}
        ></Tabs>

        {loginType === 'account' && (
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={'prefixIcon'} />,
              }}
              placeholder={'请输入账号/邮箱/电话号码'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              placeholder={'请输入密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </>
        )}
        {loginType === 'phone' && (
          <>
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <MobileOutlined className={'prefixIcon'} />,
              }}
              name="mobile"
              placeholder={'手机号'}
              rules={[
                {
                  required: true,
                  message: '请输入手机号！',
                },
                {
                  pattern: /^1\d{10}$/,
                  message: '手机号格式错误！',
                },
              ]}
            />
            <ProFormCaptcha
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              captchaProps={{
                size: 'large',
              }}
              placeholder={'请输入验证码'}
              captchaTextRender={(timing, count) => {
                if (timing) {
                  return `${count} ${'获取验证码'}`;
                }
                return '获取验证码';
              }}
              name="captcha"
              rules={[
                {
                  required: true,
                  message: '请输入验证码！',
                },
              ]}
              onGetCaptcha={async () => {
                message.success('获取验证码成功！验证码为：1234');
              }}
            />
          </>
        )}
        <div style={{ marginBlockEnd: 24 }}>
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a style={{ float: 'right' }}>忘记密码 </a>
        </div>
      </LoginForm>
    </div>
  );
};

2.登录处理

代码没有做优化，目前代码只是跑通。只为搞明白逻辑关系。

/* eslint-disable */
// src/services/demo/UserController.ts
import { request } from '@umijs/max';

/** 登录接口 POST /api/login/account */
export async function login(body: API.LoginParams, options?: { [key: string]: any }) {
  return request<API.LoginResult>('/api/admin/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

/** 获取当前的用户 GET /api/currentUser */
export async function currentUser(options?: { [key: string]: any }) {
  return request<{
    data: API.CurrentUser;
  }>('/api/admin/currentUser', {
    method: 'GET',
    ...(options || {}),
  });
}

3.修改app.tsx

import { currentUser as queryCurrentUser } from './services/demo/UserController';

import { AvatarName }  from '@/components';
// 全局初始化数据配置，用于 Layout 用户信息和权限初始化
// 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate

const loginPath = '/user/login';
export async function getInitialState(): Promise<{ name: string,currentUser?: API.CurrentUser; fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;}> {
  const fetchUserInfo = async () => {
    try {
      const msg = await queryCurrentUser({
        skipErrorHandler: true,
      });
      return msg.data;
    } catch (error) {
      history.push(loginPath);
    }
    return undefined;
  };

  const { location } = history; 
  if (![loginPath, '/user/register', '/user/register-result'].includes(location.pathname)) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      name: '@umijs/max',
    };
  }
  return {
    fetchUserInfo,
    name: '@umijs/max',
  };
}

二、说一下逻辑

1. 流程图

和AntDesign Pro的流程基本一样。

2. 注意点

• Login页面中的fetchUserInfo 调用了InitialState中的fetchUserInfo，并将获取的currentUser初始化，并flushSync了一下。
• 用户认证与用户信息获取是分开的。
• 在上一篇Umi从零搭建Ant Design Pro项目（1）中，我已经做了网络拦截，将获取的token进行了处理。就是说包括fetchUserInfo在内的网络请求都会带上token时，后端就会鉴权。

总结

今天就写这么多内容。
代码点击查看