FirebaseUI+React Router登录成功后重定向失效问题求助

看起来你遇到的问题是邮箱/密码登录模式下重定向失效，但第三方登录（如Google）正常，核心原因和你设置的signInFlow: 'redirect'有关：

当使用redirect登录流时，邮箱/密码登录完成后FirebaseUI会触发一个页面刷新（这是该登录方式在redirect模式下的默认行为），导致你的SignIn组件实例被销毁，此时this.props.history.push('/')的调用因为组件已卸载而无法生效。而Google等第三方登录的redirect流程不会触发这个额外的页面刷新，所以你的重定向逻辑能正常工作。

下面给出两种可行的解决方案：

方案1：切换到弹窗式登录（推荐） #

把登录流从redirect改成popup，这样整个登录过程不会刷新页面，组件实例始终存在，history.push就能正常执行：

class SignIn extends React.Component {
  uiConfig = {
    signInFlow: 'popup', // 修改这里
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: (authResult, redirectUrl) => {
        console.log('signInSuccessWithAuthResult', authResult, redirectUrl);
        this.props.history.push('/');
        return false;
      },
    },
  };

  // 其余代码保持不变
}

方案2：保留redirect模式，改用全局身份状态监听 #

如果你必须使用redirect模式，不要依赖signInSuccessWithAuthResult回调，而是在组件生命周期中监听身份状态变化，确保页面刷新后组件重新挂载时执行重定向：

class SignIn extends React.Component {
  state = {
    hasRedirected: false, // 标记是否已完成重定向，防止重复跳转
  };

  uiConfig = {
    signInFlow: 'redirect',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: () => {
        // 这里留空，交给onAuthStateChanged处理
        return false;
      },
    },
  };

  componentDidMount() {
    // 监听用户身份状态变化
    this.unsubscribe = firebaseApp.auth().onAuthStateChanged(user => {
      if (user && !this.state.hasRedirected) {
        this.setState({ hasRedirected: true }, () => {
          this.props.history.push('/');
        });
      }
    });
  }

  componentWillUnmount() {
    // 清理监听器，避免内存泄漏
    this.unsubscribe();
  }

  // 其余代码保持不变
}

额外检查点 #

1. 确认你的React Router版本和withRouter的使用没有版本兼容问题
2. 可以在signInSuccessWithAuthResult中打印this.props，确保history对象确实存在
3. 如果坚持用redirect模式，一定要在Firebase控制台中配置好授权的重定向URL

内容的提问来源于stack exchange，提问作者Shai Ben-Tovim