AWS Amplify Authenticator：登出时关闭登录对话框问题求助

核心问题分析 #

你手动在App类里控制Login组件的显示隐藏，和Authenticator自身的状态管理逻辑冲突，导致登出时组件状态未同步，登录对话框无法正常隐藏。

具体解决方案 #

1. 放弃手动控制，让Authenticator接管状态 #

Authenticator组件本身内置了完整的登录状态管理，不需要额外维护showHome这类自定义状态。直接用它包裹登录后可见的内容：

import { Authenticator } from '@aws-amplify/ui-react';
import { Auth } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';

class App extends React.Component {
  handleSignOut = async () => {
    try {
      // 全局登出清除所有会话
      await Auth.signOut({ global: true });
      // 无需手动调用showHome，Authenticator会自动切换到登录界面
    } catch (error) {
      console.error('登出失败:', error);
    }
  };

  render() {
    return (
      <Authenticator>
        {/* 登录后显示的内容 */}
        <button onClick={this.handleSignOut}>登出</button>
        {/* 其他主页内容 */}
      </Authenticator>
    );
  }
}

2. 若需手动控制，通过Auth事件监听同步状态 #

如果必须在App类里维护状态，要通过Amplify的Auth事件监听来同步，而非依赖自定义函数触发：

import { Authenticator } from '@aws-amplify/ui-react';
import { Auth, Hub } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';

class App extends React.Component {
  state = {
    isAuthenticated: false
  };

  componentDidMount() {
    // 初始化时检查当前登录状态
    Auth.currentAuthenticatedUser()
      .then(user => this.setState({ isAuthenticated: !!user }))
      .catch(() => this.setState({ isAuthenticated: false }));

    // 订阅Auth状态变更事件
    this.authSubscription = Hub.listen('auth', (data) => {
      switch (data.payload.event) {
        case 'signOut':
          this.setState({ isAuthenticated: false });
          break;
        case 'signIn':
          this.setState({ isAuthenticated: true });
          break;
      }
    });
  }

  componentWillUnmount() {
    // 取消订阅避免内存泄漏
    this.authSubscription();
  }

  handleSignOut = async () => {
    try {
      await Auth.signOut({ global: true });
    } catch (error) {
      console.error('登出失败:', error);
    }
  };

  render() {
    if (!this.state.isAuthenticated) {
      return <Authenticator />;
    }

    return (
      <div>
        <button onClick={this.handleSignOut}>登出</button>
        {/* 主页内容 */}
      </div>
    );
  }
}

3. 版本与配置检查 #

• 确保@aws-amplify/ui-react和aws-amplify版本匹配，版本不兼容会导致状态同步异常
• 确认Amplify初始化的Auth配置正确，无区域、用户池ID等配置错误

关键注意点 #

• 不要同时混用手动状态控制和Authenticator内置状态管理，二者选其一
• 登出必须调用Auth.signOut({ global: true })，确保清除所有会话信息
• 避免在Authenticator内部嵌套手动控制的登录组件，会造成状态逻辑混乱

内容的提问来源于stack exchange，提问作者Alessandro