ExpressJS: перенаправление на URL-адрес, обрабатываемый на стороне клиента
Я использую ExpressJs для бэкэнда и ReactJS для внешнего интерфейса. Сервер работает на локальном хосте: 3000, клиент работает на локальном хосте: 8080. Я хочу перенаправить пользователя на страницу чата после успешного входа в систему. Итак, у меня есть код на сервере:
(req, res) => {
//doing some authenticate actions up here
if (/*successful*/) {
//some actions here
res.redirect("/chat");
}
//actions on failure down here
};
Но после входа в учетную запись я получаю эту ошибку
GET http://localhost:8080/chat 404 (Not Found)
http://localhost:8080/chat существует, и он обрабатывается на стороне клиента, если я наберу его в адресной строке и перейду, я все равно смогу получить доступ к странице чата.
У меня также есть код, который обрабатывает любой запрос, не соответствующий маршрутам сервера, поэтому этот запрос может быть отправлен клиенту для обработки:
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "client/dist/index.html"));
});
Что не так с моим кодом? Я что-то пропустил?
Да, сначала я так и сделал. Но я думаю, что будет лучше, если эта работа будет выполняться сервером.
Когда вы используете app.get("*", (req, res) => {, вы должны изменить способ обслуживания статических файлов (чтобы вычислить какой-то путь).
Вы применили аутентификацию на маршрутах на стороне клиента?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны перенаправить пользователя после успешного ответа от API. Это не лучше обрабатывается серверной частью, потому что у вас есть одностраничное приложение, которое технически не имеет дополнительных страниц, о которых знает сервер, поэтому вы получаете ошибку 404 при попытке перенаправить на http://localhost:8080/chat. Он знает только о вашем файле index.html, который обслуживает код реагирования ваших пакетов. Причина, по которой вы можете ввести /chat в адресную строку, заключается в том, что ваш пользовательский интерфейс настроен на обработку запросов от используемого вами маршрутизатора. Это не сервер направляет вас туда.
Это должно быть просто, вот пример:
logUserIn = async (userData) => {
const isAuthed = await authenticateUser(userData)
if (isAuthed) {
this.props.history.push('/chat');
} else {
console.info('User not found!');
}
}
О, знаю, я понимаю. Сначала я делал это на клиенте (перенаправлял пользователя после успешного ответа от API), но подумал, что будет лучше, если этим будет заниматься сервер. Спасибо за помощь!
Кстати, вы также можете сделать это на стороне клиента, например, при успешном вызове API, проверить код состояния или условие и перенаправить на свое представление. ........ renderRedirect = () => { if (this.state.redirect) { return <Redirect to='/target' /> } } ..... Like: <Redirect to='/ target' /> Это также предотвратит перезагрузку вашего приложения.