如何正确设置firebase身份验证？

Question

我坚持使用 Firebase 身份验证。这就是问题所在。

1. 我有两个组件登录和应用程序。第一个只是呈现带有登录名和密码输入的表单。第二个包含路由器和登录组件的功能。
2. 在路由器中，我有下一个逻辑：如果用户登录，则呈现具有自动访问权限的页面，否则呈现登录页面。
3. 第一次一切正常，我创建了新用户，它被添加到 firebase，我被重定向到私人页面。
4. 麻烦。现在登录页面加载正常，但在我在其中一个输入应用程序中输入任何内容后，我会将我重定向到私人页面。每个输入都是受控元素，因此我在输入中键入的每个符号都会更改状态并导致重新渲染。但我不明白为什么它会将我重定向到私人页面。

我希望它以另一种方式工作：如果用户已登录应用程序根本不应该向他显示腰部页面，如果用户未登录应用程序应该只向他显示登录页面。

为什么应用会以这种方式工作以及如何解决？

App.js

import React, {Component} from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import { Layout } from 'antd';
import AddStock from './components/stocksDB/addStock';
import { Typography, Menu } from 'antd';
import 'antd/dist/antd.css';
import './App.css';
import AddClient from './components/clients/addClient.js';
import PifForm from './components/clients/pif/pifForm';
import KuaForm from './components/clients/pif/kuaForm';
import firebase from './firebase.js';
import {Login} from './components/login.js'

const { Title } = Typography;

const {Header, Footer, Content} = Layout;

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            login: '',
            password: ''
        }
    }

    handleChange = (event) => {
        const target = event.target;
        const name = target.name;
        this.setState({
            [name]: target.value
        }, () => {console.log(name, this.state)})
    };

    signUp = () => {
        firebase.auth().createUserWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {
            console.log(error);
        })
    };

    signIn = () => {
        firebase.auth().signInWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {
            console.log(error);
        })
    };

    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    render() {
        let user = firebase.auth().currentUser;
        if (user) {
            return (
                <Router>
                    <Layout theme='dark'>
                        <Header mode="horizontal">
                            <div className='header-wrapper'>
                                <Title level={2} style={{"color": "rgb(166 173 180)"}}>Оберіть функцію:</Title>
                                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                                    <Menu.Item key="1">
                                        <Link to='/stocksList'>Довідник ЦП</Link>
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                        <Link to='/addClients'>Довідник клієнтів</Link>
                                    </Menu.Item>
                                </Menu>
                            </div>
                        </Header>
                        <Content>
                            <Switch>
                                <Route path="/stocksList">
                                    <AddStock/>
                                </Route>
                                <Route path="/addClients">
                                    <AddClient/>
                                </Route>
                                <Route path="/kuaForm">
                                    <KuaForm/>
                                </Route>
                                <Route path="/pifForm">
                                    <PifForm/>
                                </Route>
                            </Switch>
                        </Content>
                        <Footer>Footer</Footer>
                    </Layout>
                </Router>
            )
        } else {
            return (
                <Login signIn={this.signIn} onFinishaedFailed={this.onFinishFailed} handleChange={this.handleChange} signUp={this.signUp} />
            )
        }
    }
}

export default App;

login.js

import React from 'react';
import { Form, Input, Button } from 'antd';
import { Typography  } from 'antd';

const { Title } = Typography;

export const Login = (props) => {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };

    return (
        <div>
            <Title level={2} style={{ "color": "rgb(166 173 180)" }}>Для продовження роботи пройдіть автентифікацію.</Title>

            <Form
                {...layout}
                name="basic"
                initialValues={{ remember: true }}
                onFinish={props.signIn}
                onFinishFailed={props.onFinishFailed}
            >
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input name='login' onChange={props.handleChange}/>
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password name='password' onChange={props.handleChange} />
                </Form.Item>

                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        Увійти
                    </Button>

                    <Button type="primary" htmlType="button" onClick={props.signUp} >
                        Зареєструватися
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

Answer 1

通过在 componentDidMount 中包装 onAuthStateChanged 函数并在 state 中设置用户状态（null 或 user）来部分解决问题。之后，当我尝试输入 http://localhost:3000/ 时，我仍然看到一个登录页面，但只有几秒钟，然后应用程序将我重定向到私人页面。现在我不应该在要重定向的输入中输入符号。据我了解，这是另一个问题。

现在 App.js 看起来像这样：

componentDidMount() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                this.setState({
                    user: user
                }, console.log("after didMount", this.state))
            } else {
                this.setState({
                    user: null
                })
            }
        })
    }

    render() {
        if (this.state.user !== null) {
            return (
                <Router>
                    <Layout theme='dark'>
                        <Header mode="horizontal">
                            <div className='header-wrapper'>
                                <Title level={2} style={{"color": "rgb(166 173 180)"}}>Оберіть функцію:</Title>
                                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                                    <Menu.Item key="1">
                                        <Link to='/stocksList'>Довідник ЦП</Link>
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                        <Link to='/addClients'>Довідник клієнтів</Link>
                                    </Menu.Item>
                                </Menu>
                            </div>
                            <Button onClick={this.signOut}>Вийти</Button>
                        </Header>
                        <Content>
                            <Switch>
                                <Route path="/stocksList">
                                    <AddStock/>
                                </Route>
                                <Route path="/addClients">
                                    <AddClient/>
                                </Route>
                                <Route path="/kuaForm">
                                    <KuaForm/>
                                </Route>
                                <Route path="/pifForm">
                                    <PifForm/>
                                </Route>
                            </Switch>
                        </Content>
                        <Footer>Footer</Footer>
                    </Layout>
                </Router>
            )
        } else {
            return (
                <Login signIn={this.signIn} onFinishaedFailed={this.onFinishFailed} handleChange={this.handleChange} signUp={this.signUp} />
            )
        }
    }