1a-登录注册界面和请求

AuthForm.js

import React, {useRef, useState} from 'react';
import {useLoginMutation, useRegisterMutation} from "../store/api/authApi";

const AuthForm = () => {
    const [isLoginForm, setIsLoginForm] = useState(true);

    // 引入注册的api
    const [regFn, {error:regError}] = useRegisterMutation();
    const [loginFn, {error:loginError}] = useLoginMutation();

    const usernameInp = useRef();
    const pwdInp = useRef();
    const emailInp = useRef();

    const submitHandler = (e) => {
        e.preventDefault();

        // 获取用户输入的内容
        const username = usernameInp.current.value;
        const password = pwdInp.current.value;
        // 处理登录功能
        if(isLoginForm){
            // console.log('登录 -->', username, password);
            loginFn({
                identifier:username,
                password
            }).then(res => {
                if(!res.error){
                    console.log('登录成功');
                    // 登录成功后，需要向系统中添加一个标识，标记用户的登录状态
                    // 登录状态（布尔值，token(jwt)，用户信息）
                    // 跳转页面到根目录
                }
            });
        }else{
            const email = emailInp.current.value;
            //console.log('注册 -->', username, password, email);
            regFn({
                username,
                password,
                email
            }).then(res => {
                if(!res.error){
                    // 注册成功
                    setIsLoginForm(true);
                }
            });
        }

    };

    return (
        <div>
            <p style={{color:'red'}}>
                {regError && "用户名或电子邮件重复"}
            </p>
            <p style={{color:'red'}}>
                {loginError && "用户名或密码错误"}
            </p>


            <h2>{isLoginForm?"登录":"注册"}</h2>
            <form onSubmit={submitHandler}>
                <div>
                    <input ref={usernameInp} type="text" placeholder={"用户名"}/>
                </div>
                {
                    !isLoginForm &&
                    <div>
                        <input ref={emailInp} type="email" placeholder={"电子邮件"}/>
                    </div>
                }
                <div>
                    <input ref={pwdInp} type="password" placeholder={"密码"}/>
                </div>
                <div>
                    <button>{isLoginForm?"登录":"注册"}</button>
                    <a href="#" onClick={
                        event => {
                            event.preventDefault();
                            setIsLoginForm(prevState => !prevState);
                        }
                    }>
                        {
                            isLoginForm?
                            "没有账号？点击注册":
                            "已有账号？点击登录"}
                    </a>
                </div>
            </form>
        </div>
    );
};

export default AuthForm;

createApi

使用RTKQ

import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/dist/query/react";

export const authApi = createApi({
    reducerPath:'authApi',
    baseQuery:fetchBaseQuery({
        baseUrl:'http://localhost:1337/api/'
    }),
    endpoints(build) {
        return {
            register:build.mutation({
                query(user) {
                    return {
                        url:'auth/local/register',
                        method:"post",
                        body:user, // username password email
                    }
                }
            }),

            login:build.mutation({
                query(user) {
                    return {
                        url:'auth/local',
                        method:'post',
                        body:user // identifier
                    }
                }
            }),

        }
    }
});

export const {
    useRegisterMutation,
    useLoginMutation
} = authApi;