实现登陆

一、创建登陆页面

1. src\pages\login\index.tsx

import React from "react";
import { useNavigate } from "react-router-dom";
import { Button, Form, Input, message, Space } from "antd";

import { doLogin } from "../../api/login";
import styles from "./login.module.scss";

const Index = () => {
  const navigateTo = useNavigate();

  const login = (values: Login) => {
    doLogin(values).then((res) => {
      if (res.success) {
        localStorage.setItem("token", res.data.token);
        message.success("登录成功");
        setTimeout(() => {
          navigateTo("/");
        }, 1500);
      } else {
        message.error(res.errorMessage);
      }
    });
  };

  return (
    <>
      <div className={styles.loginContainer}>
        <Form
          className={styles.loginForm}
          initialValues={{
            username: "最爱白菜吖",
            password: "123456",
          }}
          onFinish={login}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
        >
          <Form.Item
            label="用户名"
            name={"username"}
            rules={[
              {
                min: 2,
                required: true,
                message: "用户名长度至少2位",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name={"password"}
            rules={[
              {
                min: 6,
                required: true,
                message: "用户名长度至少6位",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </>
  );
};

export default Index;

2. 样式 src\pages\login\login.module.scss
   • 背景图片可以随便找一张图
   • 放在对应目录下

.loginContainer {
  width: 100vw;
  height: 100vh;
  background-image: url(../../static/images/bg.jpg);
  background-size: cover;

  .loginForm {
    padding: 80px;
    width: 500px;
    height: 300px;
    background-color: white;
    border-radius: 6px;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
}

1. 全局的变量声明 src\pages\login\login.d.ts

declare interface Login {
  username: string;
  password: string;
}

二、网络请求

1. 配置 axios => src\request\request.tsx

import { message } from "antd";
import axios from "axios";

const request = axios.create({
  timeout: 5000,
});

// 前置拦截
request.interceptors.request.use((config) => {
  // console.log("前置拦截", config);
  const token = localStorage.getItem("token");
  if (token) {
    if (config && config?.headers) {
      config.headers["authorization"] = token;
    }
  }
  // console.log("前置拦截token", config);
  return config;
});

// 后置拦截
request.interceptors.response.use(
  (res) => {
    // console.log("后置拦截", res);
    return res.data;
  },
  (e) => {
    message.error(e.message);
    return Promise.reject(e);
  }
);

export default request;

2. 配置转发 src\setupProxy.js
   • 本地 api 端口开在 3006

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/admin",
    createProxyMiddleware({
      target: "http://localhost:3006",
      changeOrigin: true,
    })
  );
};

3. 配置请求返回的类型声明 src\react-app-env.d.ts

/// <reference types="react-scripts" />
declare global {
  interface ResponseSuccess<T = {}> {
    success: boolean;
    errorMessage?: string;
    data: T;
  }
  interface IPagination<T> {
    success: boolean;
    errorMessage?: string;
    data: {
      list: T[];
      current: 1;
      pageSize: number;
      total: number;
      totalPage: number;
    };
  }
  interface Window {
    logout(): void;
  }
}
export {};

4. 登陆请求 src\api\login.tsx

import request from "../request/request";

export function doLogin(admin: Login) {
  return request.post<any, ResponseSuccess<{ token: string }>>(
    "/admin/admin/login",
    admin
  );
}

5. App.tsx 中引入

import React from "react";
import Login from "./pages/login";

function App() {
  return (
    <>
      <Login />
    </>
  );
}

export default App;