Question

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

我希望在onAuthStateChanged检查用户状态时显示加载图标。但是，我无法知道该页面是从Firebase重定向调用的，除非回调包含在url中的内容，即。 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

您可以使用onAuthStateChanged侦听器的组合来确定用户是否已登录，而不是通过检查state.user和state.loading以保持跟踪，而不是无法通过不同的URL传递状态加载状态。

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
}

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

1 个答案: