Я пытаюсь использовать 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;
Я ожидал, что страницы будут доступны только после входа в систему, но их можно просматривать без входа в систему. Кроме того, я ожидал, что после входа в систему каждая страница будет доступна для просмотра, но домашняя страница будет прикреплена ко всем другим страницам в приложении.