Amplify react自定义SignIn UI在登录后恢复

import React from 'react';
import { Auth } from 'aws-amplify';

class CustomSignIn extends React.Component {
  state = {
    username: '',
    password: ''
  };

  handleInputChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSignIn = async () => {
    const { username, password } = this.state;
    try {
      await Auth.signIn(username, password);
      // 登录成功后的操作
      this.props.onSignIn(); // 触发登录后恢复用户状态的函数
    } catch (error) {
      console.log('登录失败', error);
    }
  };

  render() {
    return (
      <div>
        <input type="text" name="username" onChange={this.handleInputChange} />
        <input type="password" name="password" onChange={this.handleInputChange} />
        <button onClick={this.handleSignIn}>登录</button>
      </div>
    );
  }
}

export default CustomSignIn;

import React from 'react';
import { withAuthenticator } from 'aws-amplify-react';
import CustomSignIn from './CustomSignIn';

class App extends React.Component {
  handleSignIn = () => {
    // 登录后恢复用户状态的逻辑
    console.log('用户已登录');
  };

  render() {
    return (
      <div>
        <h1>My App</h1>
        {/* 使用withAuthenticator包装自定义SignIn组件 */}
        <CustomSignIn onSignIn={this.handleSignIn} />
        {/* 其他应用程序内容 */}
      </div>
    );
  }
}

export default withAuthenticator(App);