Как использовать Firebase аутентификацию с реакцией, чтобы ограничить доступ и сделать доступной только после входа в систему

Question

Я пытаюсь использовать firebase аутентификацию, чтобы пользователи могли войти в мое реагирующее веб-приложение. Кнопки входа в систему и выхода из системы работают, но каждая страница по-прежнему доступна, даже если вы не вошли в систему. Кроме того, когда вы войдете в систему, вы можете прокрутить вниз и увидеть домашнюю страницу на каждой странице. Кроме того, когда вы не вошли в систему, вы также увидите форму входа на каждой странице.

Я пытаюсь добиться того, чтобы пользователи увидели страницу входа в систему, когда они впервые зашли на сайт, и не смогут получить доступ ни к чему другому, пока они не зарегистрируются и не войдут в систему. Итак, я просмотрел документы Firebase и использовал соответствующие функции, но он все еще не работает правильно.

Я пытался закомментировать маршруты и страницы были недоступны до тех пор, пока вы не вошли в систему, но проблема, связанная с этим, заключалась в том, что после входа другие страницы не могли быть просмотрены только на главной странице.

Файл App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Discussion from './pages/Discussion';
import Contact from './pages/Contact';
import Profile from './pages/Profile';
import Register from './pages/Register';
import Homepage from './pages/Homepage';
import Courses from './pages/Courses';
import Firebase from '../config/firebase';
import Development from './pages/Development';
import Beginner from './pages/Beginner';
import Amateur from './pages/Amateur';
import Intermediate from './pages/Intermediate';

class App extends Component {
  constructor() {
    super();
    this.state = {
      user: null,
    };
    this.authListener = this.authListener.bind(this);
  }

  componentDidMount() {
    this.authListener();
  }

  authListener() {
    Firebase.auth().onAuthStateChanged((user) => {
      // console.log(user);
      if (user) {
        this.setState({ user });
        // localStorage.setItem('user', user.uid);
      } else {
        this.setState({ user: null });
        // localStorage.removeItem('user');
      }
    })
  }



  render() {
    return (
      <div>

        <BrowserRouter>
          <div>
            <Route exact path="/" component={() => <Homepage />} />
            <Route exact path="/pages/contact" component={() => <Contact />} />
            <Route exact path="/pages/discussion" component={Discussion} />
            <Route exact path="/pages/courses" component={() => <Courses />} />
            <Route exact path="/pages/profile" component={() => <Profile />} />
            <Route exact path="/pages/register" component={() => <Register />} />
            <Route exact path="/pages/development" component={() => <Development />} />
            <Route exact path="/pages/beginner" component={() => <Beginner />} />
            <Route exact path="/pages/amateur" component={() => <Amateur />} />
            <Route exact path="/pages/intermediate" component={() => <Intermediate />} />
          </div>
        </BrowserRouter>
        <div>
          {this.state.user ? (<Homepage />) : (<Register />)}
        </div>

      </div>

    );
  };
}

export default App;

Register.js 

import React, { Component } from 'react';
import { Form, Button, Jumbotron } from 'react-bootstrap';
import './RegisterStyle.css';
import Firebase from '../../config/firebase';

class Register extends Component {
    constructor(props) {
        super(props);
        this.login = this.login.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.signup = this.signup.bind(this);
        this.state = {
            email: '',
            password: ''
        };
    }

    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    login(e) {
        e.preventDefault();
        Firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u) => {
            window.location = './Profile';
        }).catch((error) => {
            console.log(error);
        });
    }

    signup(e) {
        e.preventDefault();
        Firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
            .catch((error) => {
                console.log(error);
            })
    }


    render() {
        return (
            <div className="Register">
                <Jumbotron className="Style">
                    <div>
                        <Form.Group id="formBasicEmail">
                            <Form.Label>Email address</Form.Label>
                            <input value={this.state.email}           onChange={this.handleChange} type="email" name="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
                        </Form.Group>

                        <Form.Group id="formBasicPassword">
                            <Form.Label>Password</Form.Label>
                            <input value={this.state.password}      onChange={this.handleChange} type="password" name="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
                        </Form.Group>
                        <Button variant="primary" onClick={this.login} type="submit">
                            Login
                </Button>
                        <Button variant="primary" onClick={this.signup} type="submit">
                            Sign Up
                </Button>
                    </div>
                </Jumbotron>
            </div>
        );
    }
}

export default Register;

Я ожидал, что страницы будут доступны только после входа в систему, но их можно просматривать без входа в систему. Кроме того, я ожидал, что после входа в систему каждая страница будет доступна для просмотра, но домашняя страница будет прикреплена ко всем другим страницам в приложении.