Я пытаюсь создать способ добавления защищенных маршрутов в мое приложение реакции. У меня есть Node back end с маршрутом /isLoggedIn, который будет отвечать независимо от того, вошел ли пользователь в систему или нет. Все работает на бэкэнде, но я продолжаю получать множество ошибок в бэкэнде. Я пытался сделать это несколькими способами, но ни один из них не помог. Этот способ имел для меня смысл, но на самом деле он не работает. У меня есть несколько дополнительных вопросов.
Итак, мое приложение структурировано так:
Приложение. js
class App extends React.Component {
render() {
return (
<Router>
<div>
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/secret" component={PrivateRoute(Secret)}/>
</Switch>
</div>
</Router>
);
}
}
PrivateRoute. js
export default function PrivateRoute(ProtectedComponent) {
return class extends React.Component {
state = {
authenticated: false
}
componentDidMount() {
axios.get('http://localhost:8000/isloggedin', {withCredentials: true})
.then(res => {
if (res.status === 200) {
console.log("Status ok");
this.setState({authenticated: true});
} else {
console.log(res.error);
}
})
.catch(err => {
console.log(err);
this.setState({authenticated: false})
});
}
render() {
if (this.state.authenticated) {
return <ProtectedComponent {...this.props} />
}
return <Redirect to="/login" />
}
}
}
Поэтому, когда я вхожу в систему и пытаюсь получить доступ к защищенному маршруту, я получаю «Status ok» в моей консоли, так что все работает до этого момента, но затем я получаю эту ошибку.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Прежде всего, я не совсем понимаю, что это значит, говоря, что это не подключенный компонент. Как этот компонент не смонтирован? Разве это не вызывается <Route path="/secret" component={PrivateRoute(Secret)}/>? Кроме того, мне нужно посещать маршрут /isLoggedIn каждый раз, когда пользователь пытается получить доступ к защищенной странице? Я вижу, что во многих уроках они просто устанавливают состояние как {loggedIn: true}, как только они входят в систему, и это все, что они делают. Разве это не угроза безопасности, так как состояние - это просто javascript объект, не может ли состояние просто быть установлено в true со стороны клиента? Вся эта проверка на стороне клиента кажется просто небезопасной, или, может быть, я просто не знаю хорошего способа создания защищенных маршрутов.
Наконец, если есть лучший способ обработки защищенных маршрутов, пожалуйста, дайте мне знать!