身份验证自定义重定向回调

Question

我已经使用 Javascript SDK 将 Firebase/authentication 与我的 React Web 应用程序集成在一起。我使用重定向方法设置 Github 登录。用户成功使用 Github 进行身份验证后，他们将被重定向回我的登录表单。我已经将侦听器onAuthStateChanged设置为我的componentWillMount，以便在识别用户后推送路由。

我想在onAuthStateChanged检查用户状态时显示一个加载图标。但是，我无法知道该页面是从Firebase重定向调用的，除非回调在网址中包含某些内容，即。 website.com/login-form/from-firebase-callback/

关于如何设置它的任何想法？我已经浏览了文档，但找不到任何东西。我希望这是某处的快速配置修复，因为我不想手动设置流程。

class LoginForm extends React.Component {
    componentWillMount() {
        // would like to add a something to the url from the firebase redirect
        const query = queryString.parse(this.props.location.search);
        if (query === 'from-firebase-callback') {
            this.isLoading = true;
        }
        const authChangedListener = auth.onAuthStateChanged((user) => {
            if (user) {
                this.loading = false;
                this.props.history.push('/dashboard/');
            } else {
                console.log('no user...');
            }
        });
    }
... rest of component

Answer 1

与其陷入无法从不同URL传递状态的困境，不如使用onAuthStateChanged侦听器的组合来确定用户是否已登录，方法是检查state.user和state.load来跟踪加载状态。

class LoginForm extends React.Component {
    constructor(){
         super();
         this.state={
             loading:true
         }
    }
    componentWillMount() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                this.setState({loading:false,user})
                this.props.history.push('/dashboard/');
            } else {
                this.setState({loading:false})
            }
        });
    }
    ... rest of component
}