Начните с аутентификации node.js express с React SPA - PullRequest
Новая
       2

Начните с аутентификации node.js express с React SPA

1 голос
/ 02 апреля 2020

Я начинаю создавать приложение с сервером в Express из Node.JS и в качестве SPA в React.

У меня есть панель мониторинга, которая должна быть доступна только для аутентифицированных пользователей. Также должны быть премиум и не премиум пользователи. Пользователи должны иметь возможность войти в систему с помощью Google et c. а также используя электронную почту + пароль.

Я немного погуглил, но не нашел четкого ответа ... Думаю, я понял, как это будет работать, если все будет отображаться на сервере (с e js или что-то в этом роде), но я не совсем понимаю, как это будет работать с React SPA. Паспорт JS кажется стандартным для этого? К сожалению, документация очень неструктурированная ... также слышал о JWT, но, как вы, вероятно, видите, я не очень много знаю.

Я был бы очень признателен за хорошее резюме или ссылку на учебник (но Я ничего не нашел ...)

Заранее спасибо!

1 Ответ

1 голос
/ 02 апреля 2020

Это много, чтобы принять. Был там. Если вы используете API-интерфейс сервера с Web SPA, вам нужно разбить свое исследование отдельно от этих двух.

Сторона сервера:

Хороший старт с начала:
Node.js Сервер и основы аутентификации: Express, сеансы, паспорт

У меня очень и очень короткие сроки, необходимые для создания аутентификации и авторизации. Популярный способ сделать это в express с помощью express middleware , как описано в руководстве выше.

Клиентская сторона:

Главное, чтобы имейте в виду, что после того, как вы сделали серверную часть, каждый URL должен возвращать код состояния HTTP : 401 или 403 (возможно, другие), когда:

401 Несанкционированный

Хотя в стандарте HTTP указано «неавторизованный», семантически этот ответ означает «не прошедший проверку подлинности». То есть клиент должен аутентифицировать себя, чтобы получить запрошенный ответ.

свободный перевод: Вы не вошли в систему.

403 Запрещено

Клиент не имеет прав доступа к контенту; то есть он не авторизован, поэтому сервер отказывается предоставить запрошенный ресурс. В отличие от 401, личность клиента известна серверу.

свободный перевод: вам не разрешено видеть / делать это

Так что в вашем клиенте вы хотите создать унифицированную http api caller для обработки этих кодов. Этот «унифицированный абонент» может сильно различаться в зависимости от того, какие технологии вы используете (Redux, MobX, Fetch API, ...).

Я оставлю вам пример с использованием fetch и обещания: 

function globalFetch(url, data) {
  return new Promise((resolve, reject) => {
    fetch(url, data)
      .then(res => {
        if (res.status == 401) {
          // move SPA to login page here.
          reject();
        }

        if (res.status == 403) {
          // move SPA to "you are not allowed to see this stuff" page
          reject();
        }

        resolve(res);
      })
      .catch(erro => {
        // do stuff with the error, like log.
        // move spa to "That’s an error." page.
        reject();
      })
  });
}

, и вы используете эту функцию для всех запросов в вашем SPA, например: 

globalFetch('/api/users/login', { method: 'POST', body: { ... } });
...