Я использую Firestore и у меня есть доступ к состоянию, которое сообщит мне, аутентифицирован ли пользователь или нет. Я сопоставляю эти условия с реквизитами и буду использовать перенаправление react-router-dom для перехода пользователя на страницу входа в систему, если он не аутентифицирован.
Однако, когда я консоль регистрирую статус аутентификации, я вижу, что первоначально он будет показывать falseв то время как он загружает эту информацию, а затем переключается на истину. Однако к тому времени, когда он обнаруживает, что пользователи аутентифицированы, я уже перенаправил их.
Как мне перенаправить пользователей на основе их аутентификации в рамках реакции?
export class PrimaryNavBar extends Component {
render(){
const { auth, location } = this.props;
const authenticated = auth.isLoaded && !auth.isEmpty;
return (
<React.Fragment>
{!authenticated ? <Redirect to="/"/> : null}
<Navbar bg="primary" variant="dark">
<Container>
<Link to="/">
....
У меня естьЗдесь были рассмотрены другие ответы, но они не помогли с перенаправлениями, просто выведите нулевые значения, если они не аутентифицированы.
Обновление
Я реструктурировал свой код для перенаправлений, произойдет в файле app.js
Новая проблема заключается в том, что всякий раз, когда я изменяю маршрут пользователем, он будет перепроверять аутентификацию, которая будетсначала ложь, и они снова окажутся на экране входа.
class App extends Component {
state = {
isAuthenticated: this.props.isAuthenticated
}
render() {
const logoutHandler = () => {
this.props.firebase.logout();
};
const authenticated = this.props.auth.isLoaded && !this.props.auth.isEmpty;
return (
<Aux>
{!authenticated ? <Redirect to="/" /> : null}
<Route path="/" exact component={Login} />
<Route path='/(.+)' render={() => (
<React.Fragment>
<PrimaryNavBar logout={logoutHandler} />
<Switch>
<Route path="/dashboard" exact component={Dashboard} />
<Route path="/auctions" component={Auctions} />
<Route path="/auctions/:id" component={AuctionItem} />
<Route path="/auctions/create-auction" component={CreateAuction} />
<Route path="/bidders/create-bidder" component={CreateBidder} />
<Route path="/bidders/:id" component={Bidder} />
<Route path="/bidders" component={Bidders} />
</Switch>
</React.Fragment>
)} />
<ReduxToastr position="bottom-right" />
</Aux>
);
}
}
const mapStateToProps = state => {
return {
isAuthenticated: state.firebase.auth.uid,
auth: state.firebase.auth
};
};
const mapDisptachToProps = dispatch => {
return {};
};
export default withRouter(withFirebase(
connect(
mapStateToProps,
mapDisptachToProps
)(App)
));