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 (<divstyle={{display: 'flex',flexDirection: 'column',height: '100vh',overflow: 'auto',backgroundImage:"url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",backgroundSize: '100% 100%',}}><LoginFormonFinish={onSubmit}title="AntDesgin Pro"subTitle="基于Umi从零搭建Ant Desgin Pro"><Tabscentereditems={items}activeKey={loginType}onChange={(activeKey) => setLoginType(activeKey as LoginType)}></Tabs>{loginType === 'account' && (<><ProFormTextname="username"fieldProps={{size: 'large',prefix: <UserOutlined className={'prefixIcon'} />,}}placeholder={'请输入账号/邮箱/电话号码'}rules={[{required: true,message: '请输入用户名!',},]}/><ProFormText.Passwordname="password"fieldProps={{size: 'large',prefix: <LockOutlined className={'prefixIcon'} />,}}placeholder={'请输入密码'}rules={[{required: true,message: '请输入密码！',},]}/></>)}{loginType === 'phone' && (<><ProFormTextfieldProps={{size: 'large',prefix: <MobileOutlined className={'prefixIcon'} />,}}name="mobile"placeholder={'手机号'}rules={[{required: true,message: '请输入手机号！',},{pattern: /^1\d{10}$/,message: '手机号格式错误！',},]}/><ProFormCaptchafieldProps={{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#getinitialstateconst 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时，后端就会鉴权。

总结

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