Я пытаюсь настроить маршрутизацию входа в систему для моего веб-приложения.
Идея такова:
Войти и зарегистрироваться
Если аутентификация отсутствует, она будет направлена на /login
который затем отобразит компонент Login
. Если есть, я направлю на /dashboard
- В
Login
, если пользователь введет правильное имя пользователя и пароль, он будет перенаправлен на /dashboard
, иначе он ничего не сделаетмаршрутизация. - Если пользователь посещает
/
Если есть какая-либо аутентификация, пользователь перенаправит на /dashboard
еще на /login
Я пытался использовать this.props.history.push
для перенаправления между Login
- DashBoard
компонентами.
Вот мои маршруты пока, я не знаю, является ли это лучшей практикой. Если это не так, любая помощь будет полезна.
Routing.js:
...
render() {
return(
<>
<Route path="/login"><Login showAlert={this.showAlert}/></Route>
<Route path="/register"><Register showAlert={this.showAlert}/></Route>
<AuthRoute authed={AuthenticationService.isUserLoggedIn()} path="/">
<Dashboard/>
</AuthRoute>
<AuthRoute authed={AuthenticationService.isUserLoggedIn()} path="/dashboard">
<Dashboard/>
</AuthRoute>
</>
)
...
Login.js:
...
componentDidMount() {
if(AuthenticationService.isUserLoggedIn()) {
this.props.history.push('/dashboard');
}
}
...
handleSubmit = (event) => {
event.preventDefault();
AuthenticationService.authenticateAccount(this.state.email, this.state.password)
.then(() => {
this.props.history.push('/dashboard')
});
}
...
export default withRouter(Login);
Однако, он имеет Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
хотя я использую componentDidMount()
![enter image description here](https://i.stack.imgur.com/oCTJZ.png)
Снова, любая помощь будет оценена.
Спасибо.
ОБНОВЛЕНИЕ : проблема возникает только после нажатия login
из /login