Нужна помощь с процессом аутентификации JWT - PullRequest
Новая
       58

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

0 голосов
/ 12 апреля 2020

Я работаю над проектом входа пользователя. Мой интерфейс - React, а серверная часть - Node / Express js. Я пытаюсь узнать о JWT для создания защищенных маршрутов. Тем не менее, я застрял, когда дело доходит до отправки моего токена (уже успешно сгенерированного) обратно в мое приложение переднего плана. Я пытаюсь сохранить токен у повара ie, а затем отправить его обратно на мою сторону реакции. Насколько я понимаю, я должен хранить токен на стороне реакции, прежде чем смогу получить доступ к защищенному маршруту на моей стороне сервера, но я не знаю, как выполнить это. Вот мой код для запроса на вход в систему на моем сервере: 

app.post('/userLogin', function(req, res) {
    var {usernameLogin, passwordLogin} = req.query;
    console.log(req.query);
    var validateLogin = `SELECT CustomerID FROM CUSTOMER WHERE Username='${usernameLogin}' AND Password='${passwordLogin}'`;
    mysqlConnection.query(validateLogin, (error, result) => {
        if(error) {
            console.log(error);
        } else {
            // Checks to see if the result object (CustomerID) exists or not.
           if(Object.entries(result).length === 0) {
               console.log('sorry');
           } else {
               console.log(result);
               console.log('existing');

               const token = jwt.sign({ usernameLogin: usernameLogin}, 'loginKey');
               res.cookie('token', token, { httpOnly: true}).sendStatus(200);
               console.log(token);
           }
        } 
    });
});

, и это моя реакция onSubmit (называемая логин) в моем приложении реакции. Как примечание, сообщение «все сработало» успешно выводится на консоль, но в этот момент я не знаю, как извлечь и сохранить токен на стороне клиента для будущего использования для доступа к защищенным маршрутам: 

login = (event) => {
    event.preventDefault();
    console.log(this.state);
    fetch('http://localhost:3001/userLogin?usernameLogin=' + this.state.usernameLogin +
          '&passwordLogin=' + this.state.passwordLogin, {method: 'POST'}
    )
    .then(res => {
      if (res.status === 200) {
        console.log("it worked!!!");

      } else {
        console.log('there was a problem at line 27');
      }
    })
  };

Любое понимание будет с благодарностью !!!

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Просто сохраните его локально, используя localStorage .

На стороне сервера 

// Using JSON ease the client-side access
res.status(200).json({ token: token, status: 200 });

На стороне клиента 

fetch('your-api-endpoint')
   .then((res) => res.json())
   .then((res) => {
      if (res.status === 200) {
         localStorage.setItem('token', res.token);
      } else {
         // TODO: handle the error
      }
   });

// Later, when you need the claim to access protected routes
const token = localStorage.getItem('token');
0 голосов
/ 13 апреля 2020

На стороне клиента вы можете сохранить токен, возвращенный со стороны сервера, используя свойство localStorage .

Пример установки элемента: localStorage.setItem("token", <token>);

Пример получить предмет: let token = localStorage.getItem("token");

Документы: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage

PS: Дайте мне знать, если было достаточно для решения вашего вопроса.

...