13. 注册和登录

封装Layout

使用 props.children 使组件能插入子组件

import React from "react";
import styles from "./MainLayout.module.css";
import { Header, Footer } from "../../components";
export const MainLayout: React.FC = ({ children }) => {
  return (
    <>
      <Header />
      {/* 页面内容 content */}
      <div className={styles["page-content"]}>{children}</div>
      <Footer />
    </>
  );
};

antd 表单验证

官方文档

<Form.Item
  label="Confirm Password"
  name="confirm"
  hasFeedback
  rules={[
    { required: true, message: "Please input your confirm password!" },
    ({ getFieldValue }) => ({
      validator(_, value) {
        if (!value || getFieldValue("password") === value) {
          return Promise.resolve();
        }
        return Promise.reject("密码确认不一致！");
      },
    }),
  ]}
  >
  <Input.Password />
</Form.Item>

注册请求

export const RegisterForm = () => {
  const navigate = useNavigate()
  const onFinish = async (values: any) => {
    try {
      // 状态204 无返回值
       await axios.post('/auth/register', {
            username: values.username,
            password: values.password,
            confirmPassword: values.confirm
        })
       // 请求成功后跳转登录页面
        navigate('/signIn')
    } catch(e) {
        alert("注册失败")
    }
  };
  // ...
}