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

Question

我已经使用 Javascript SDK 将 Firebase/authentication 与我的 React 网络应用集成。我使用重定向方法设置 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 跟踪加载状态。

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
}

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

Authentication custom redirect callback

authentication

provider

firebase

reactjs