Непонимание процесса аутентификации JWT

Question

Я создаю проект, используя React + Redux + Apollo Client + Graphql

Когда нам нужно войти в наше приложение, нам нужно использовать токен (сохраненный в localStorage, например), который вставляется в параметр headers, например в приведенном ниже коде:

const client = new ApolloClient ({
 uri: 'http://localhost:4000/api',
 headers: {
  authorization: `Bearer ${localStorage.token}`,
 }, 
});

После запроса сервер проверяет токен и узнает, кто является пользователем.

Мой вопрос: откуда нам нужно получить токен и поместить его в заголовки параметр для входа в систему (зарегистрироваться)? Новый клиент приходит на нашу страницу входа в систему, у него нет токена (в localStorage или где-то еще) в начале, но сервер требует его в запросах. И если мы удалим параметр заголовков из нашего клиента, процесс входа в систему будет продолжен, но сервер не поймет, кто является текущим пользователем.

Answer 1

Обычно сервер является тем, кто выпускает токен JWT, и это происходит при входе пользователя в систему или, возможно, при создании учетной записи. Для этих конкретных вызовов вы должны , а не ожидать JWT в заголовке. Вместо этого пользователь будет передавать учетные данные, такие как имя пользователя и пароль. Для большинства других вызовов целесообразно передавать JWT в заголовке запроса.

Имейте в виду, что основной целью JWT является освобождение пользователя от необходимости предоставлять личные учетные данные во время большинства запросов. Вместо этого пользователь может просто представить JWT, как и паспорт, чтобы получить доступ к вашим веб-службам.

В ответ на ваши комментарии ниже я бы предложил, чтобы вы продолжали процесс регистрации / регистрации отдельно от пользовательской области вашего приложения. Вот типичный рабочий процесс:

• Потенциальный пользователь посещает ваш сайт и создает учетную запись, выбирая имя пользователя и пароль и, возможно, предоставляя определенную другую личную информацию
• Ваше приложение создает учетной записи, а затем отправляет ссылку для проверки электронной почты на адрес электронной почты пользователя. Сервер помещает пользователя на страницу, где упоминается все это
• . Пользователь открывает электронное письмо, содержащее ссылку для проверки, которая при нажатии активирует учетную запись. Ваше приложение возвращает веб-страницу, которая затем просит пользователя войти в систему.
• Наконец, пользователь входит в систему с обычной страницы входа.

Обратите внимание, что здесь JWT не вообще участвует в процессе регистрации, и при этом они не должны быть. Пользователь JWT должен появиться только после первого входа пользователя в систему.

Answer 2

Решение:

вам нужно проверить токен в localStorage и обновить запрос, если токен существует

const client = new ApolloClient({
  uri: 'http://localhost:4000/api',
  request (operation) {
    const headers = {};
    const token = localStorage.getItem('token');
    if (token) headers.authorization = 'Bearer ' + token;
    operation.setContext({ headers });
  }
})