Question

我使用FirebaseUI React包进行用户登录/注册。我已经完成了所有工作，但在成功登录工作后我无法获得重定向。

StyledFirebaseAuth呈现为SignIn的一个组成部分用于配置FirebaseUI Auth模型的组件。
SignIn组件包含withRouter，因此当我收到成功回调时，我可以访问history道具并设置为＆＃39; /＆＃39;
我确定登录成功，因为我看到signInSuccessWithAuthResult回调和我的onAuthStateChanged监听器触发了正面结果。

编辑：电子邮件/密码提供商似乎遇到了问题，但使用Google作为登录提供商时，重定向工作正常。

我做错了什么？这是完整的文件：

＆＃13;

import React from "react";

import firebase from 'firebase/app';
import firebaseApp from '../firebaseApp';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import { withRouter } from "react-router";

// Styles
import styles from '../App.css'; // This uses CSS modules.

class SignIn extends React.Component {
  uiConfig = {
    signInFlow: 'redirect',
    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
      }
    },
  };

  render() {
    return (
      <div>
        <h1>Caazam SignIn</h1>
        <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebaseApp.auth()} />        
      </div>
    );
  }
}

export default withRouter(SignIn);

＆＃13;

Answer 1

所以问题最终是主App组件中的条件路由。

正如我在问题的评论中提到的，SignIn组件中的重定向（发生第1个）和App组件中的onAuthStateChanged侦听器之间存在异步竞争条件（稍后发生）。当重定向时，听众还没有改变状态，所以条件路由到了＆＃39; /＆＃39;被重定向回SignIn。

我找到的解决方案基于Robin Wieruch的精彩教程 - A Complete Firebase in React Authentication Tutorial。绝对是我发现的最全面的教程 - 只需在FirebaseUI中替换标准＆＃39; Firebase身份验证。

基本上不使用条件路由，而是使用两个单独的高阶组件进行身份验证（将auth状态作为响应上下文传递给整个应用程序）和授权（保护组件并重定向用户以在需要时登录）。

Answer 2

我建议按照react-router网站中的描述创建PrivateRoute组件： https://reacttraining.com/react-router/web/example/auth-workflow

这是Tyler McGinnis的教程，详细信息： https://tylermcginnis.com/react-router-protected-routes-authentication/

使用FirebaseUI + React Router成功登录时重定向

2 个答案: