meet_miniprogramr/src/view/login/index.tsx

import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
import sha265 from 'sha256';

import { api_login } from '../../api/system';

import './index.css';

const Login: React.FC = () => {
  const navigate = useNavigate();

  const onFinish = async (values: api_login_params) => {
    const res = (await api_login({
      ...values,
      loginPassword: sha265(values.loginPassword)
    })) as any;
    if (!res.token) return;
    localStorage.setItem('token', res.token);
    navigate('/home');
  };

  return (
    <div className='login'>
      <div className='login_main'>
        <Form
          name='normal_login'
          className='login-form'
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item name='loginName' rules={[{ required: true, message: '请输入用户名!' }]}>
            <Input prefix={<UserOutlined className='site-form-item-icon' />} placeholder='用户名' />
          </Form.Item>
          <Form.Item name='loginPassword' rules={[{ required: true, message: '请输入密码!' }]}>
            <Input
              prefix={<LockOutlined className='site-form-item-icon' />}
              type='password'
              placeholder='密码'
            />
          </Form.Item>

          <Form.Item>
            <Button type='primary' htmlType='submit' className='login-form-button'>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;