已知保护页自动唤起登录方法，如何点击按钮唤起/关闭Amplify登录框？

你可以通过Auth组件库提供的钩子（比如useAuthenticator）来手动控制登录对话框的显示和隐藏，以下是具体实现思路和示例：

核心实现逻辑 #

大部分主流Auth组件库（如AWS Amplify UI React、Firebase Auth React组件）都提供了用于手动控制认证流程的钩子，通过这些钩子可以获取唤起登录、关闭登录对话框的方法，结合按钮点击事件即可实现类似Airbnb的交互效果。

示例代码（以AWS Amplify为例） #

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

function App() {
  // 从钩子中获取唤起登录的方法和当前认证状态
  const { signIn, authStatus } = useAuthenticator();

  return (
    <div className="app-container">
      {/* 未登录时显示登录按钮，点击唤起对话框 */}
      {authStatus !== 'authenticated' && (
        <button onClick={signIn} className="login-btn">登录</button>
      )}

      {/* 认证组件，登录成功后自动关闭对话框并渲染用户内容 */}
      <Authenticator>
        {({ user, signOut }) => (
          <div className="user-content">
            <p>欢迎回来，{user.username}</p>
            <button onClick={signOut} className="logout-btn">退出登录</button>
          </div>
        )}
      </Authenticator>
    </div>
  );
}

手动关闭对话框的额外场景 #

如果需要手动触发关闭（比如点击对话框的关闭按钮），部分库会提供专门的关闭方法，或者可以结合状态自定义控制：

import { useState } from 'react';
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react';

function CustomLoginFlow() {
  const [showLoginModal, setShowLoginModal] = useState(false);
  const { signIn } = useAuthenticator();

  return (
    <>
      <button onClick={() => {
        setShowLoginModal(true);
        // 唤起登录流程
        signIn();
      }}>登录</button>

      {/* 自定义模态框容器，通过状态控制显示 */}
      {showLoginModal && (
        <div className="login-modal-overlay">
          <div className="login-modal">
            <Authenticator
              // 登录成功后关闭模态框
              onAuthSuccess={() => setShowLoginModal(false)}
              // 点击取消时关闭模态框
              onCancel={() => setShowLoginModal(false)}
            />
            {/* 手动关闭按钮 */}
            <button onClick={() => setShowLoginModal(false)} className="close-btn">×</button>
          </div>
        </div>
      )}
    </>
  );
}

注意事项 #

不同Auth组件库的API命名可能略有差异，但核心逻辑一致：通过钩子获取控制认证流程的方法，结合事件或状态来手动唤起/关闭登录对话框。如果使用其他库，可参考对应官方文档查找类似的手动控制API。

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