Я пишу приложение в реаги и у меня проблема с перенаправлением. Я сохраняю токен JWT и простые пользовательские данные из NodeJS api в localstore. У меня есть личный маршрут, который перенаправляет незарегистрированного пользователя на страницу входа в систему, но если пользователь вошел в систему и если вручную ввести / войти в URL-адрес, пользователь возвращается на страницу входа, несмотря на то, что уже вошел в систему.
Я не знаю как именно обойти это. Я думал о том, чтобы сделать что-то похожее на Приватный маршрут, но я не знаю, хороша ли эта практика и ее нельзя пропустить.
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<PrivateRoute exact path="/:user_name/boards" component={Boards} />
<PrivateRoute
exact
path="/:user_name/boards/:type"
component={Board}
/>
<Route component={Error} />
</Switch>
</ThemeProvider>
);
}
}
export default App;
class PrivateRoute extends Component {
static contextType = DataContext;
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
const token = localStorage.getItem('token');
const user = localStorage.getItem('user');
if (!token || !user) {
localStorage.removeItem('token');
localStorage.removeItem('user');
this.props.history.push('/login');
}
}
render() {
const { token } = this.context;
const { component: RouteComponent, ...rest } = this.props;
return token ? (
<Route
{...rest}
render={(routeProps) => <RouteComponent {...routeProps} />}
/>
) : (
<Redirect to="/login" />
);
}
}
export default withRouter(PrivateRoute);
class Login extends Component {
static contextType = DataContext;
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
};
submitForm = (e) => {
e.preventDefault();
const { login } = this.context;
login(this.state).then((res) => {
this.props.history.push(`/${res.user.user_name}/boards`);
});
};
render() {
return (
<StyledForm onSubmit={this.submitForm}>
<StyledInput
onChange={this.handleChange}
type="text"
name="email"
value={this.state.email}
placeholder="Podaj adres e-mail"
/>
<StyledInput
onChange={this.handleChange}
type="password"
name="password"
value={this.state.password}
placeholder="Wprowadz hasło"
/>
<StyledButton type="submit">Zaloguj</StyledButton>
</StyledForm>
);
}
}
export default withRouter(Login);