React + Express С паспортом. js - PullRequest
Новая
       2

React + Express С паспортом. js

0 голосов
/ 19 июня 2020

Я настраиваю приложение с полным стеком с помощью React и Express JS.

Я использую Passport. js для аутентификации и столкнулся с небольшой проблемой ...

Итак, мой интерфейс и сервер - это два отдельных пакета, работающих на двух разных портах. В моем приложении express я создал следующий маршрут: 

app.post('/api/account/login', (req, res, next) => {
    passport.authenticate('local', {
      successRedirect: '/dashboard',
      failureRedirect: '/users/login',
    }) (req, res, next);
  });

Это довольно стандартно для Passport. js идет. В принципе, если он аутентифицирует предоставленные мной учетные данные, он должен перенаправить меня на / dashboard. Если нет, то на другой упомянутый маршрут.

Я могу вызвать эту конечную точку из моего реагирующего приложения и получить правильный ответ, как показано ниже, на вкладке сети для chrome. 

Request URL: http://localhost:3000/dashboard
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

Однако на самом деле он не перенаправляет меня в / dashboard. Разве так нельзя?

Спасибо.

1 Ответ

1 голос
/ 19 июня 2020

Похоже, ваше приложение React вызывает маршрут через ajax, используя что-то вроде fetch.

Способ использования Passport предполагает, что браузер выдает запросы напрямую. При успешном входе в систему Passport возвращает ответ Redirect (HTTP 302 или аналогичный), который браузер учитывает и перенаправляет пользователя на.

Ajax запросы не работают таким образом, , поскольку нет Никакой навигации не происходит .

Вам нужно будет решить это самостоятельно на стороне React. Ваше приложение Express должно будет обрабатывать аутентификацию сеанса, (например) возвращая сообщение JSON с токеном или сохраняя приготовление сеанса ie. Вам нужно будет обновить свое приложение React, чтобы распознать это, а затем перейти к правильному маршруту через клиентскую Javascript.

Если вы используете react-router, у них есть пример кода . , что может быть полезно.

...