Сохранить JWT в локальном хранилище - PullRequest
Новая
       17

Сохранить JWT в локальном хранилище

0 голосов

В настоящее время я занимаюсь разработкой приложения для экспресс-узла postgresql и пытаюсь реализовать Jsonwebtokens в качестве аутентификации.Я видел несколько учебных пособий о том, как это реализовать, и я понял, как это сделать, в бэкэнде, но интерфейс обычно пропускается, и, очевидно, все просто тестируют свой код с помощью Postman.

Я также читал онлайнчто рекомендуемый способ реализации аутентификации jwt - сохранить сгенерированный токен в localstorage и, при необходимости, отправить его в заголовок.Но я не смог найти, как это сделать ...

Таким образом, мои вопросы:

  1. Как сохранить токен во внешнем интерфейсе после его генерации?бэкэндом?(пример очень помог бы, потому что я не совсем понял, как я должен получить токен во внешней программе javascript)
  2. Как вы отправляете токен в заголовках при создании httpЗапрос, который нуждается в этом, как только вы его сохранили?

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

На стороне сервера, после того как вы создали токен и вошли в систему, вы отправляете токен с помощью res.send (), пример ниже, обратите внимание, что у вас может быть другой подход к функциям findByCredentials ad genereateAuthToken, они являются пользовательскими: 

app.post("/users/login", async (req, res) => {
  try {
    const user = await User.findByCredentials(
      req.body.email,
      req.body.password
    );
    const token = await user.generateAuthToken();

    res.send({ token: user.tasks });
  } catch (e) {
    res.status(400).send();
  }
});

На веб-интерфейсе вы можете использовать функцию html5 fetch () для отправки токена в заголовке.Например, если вы хотите получить доступ к «/ users / me», который требует аутентификации, выполните следующие действия (однако сначала убедитесь, что вы сохранили токен в localalstorage, чтобы получить к нему доступ через getItem: 

localStorage.setItem('userInfo', JSON.stringify(userInfo));

document.getElementById("my-profile").addEventListener("click", getMe);

тогда: 

function getMe(e) {
    e.preventDefault();
    var token = JSON.parse(localStorage.getItem('token'));
    console.log(`Authorization=Bearer ${token}`)
    fetch('/users/me', {
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ' + token
        }
    })
        .then(res => res.json())
        .then(data => {
            console.log(data)
            // window.location.href = 'http://localhost:3000/dashboard';
        })
        .catch(err => { console.log(err) })
}
0 голосов
/ 25 мая 2018

Как вы сказали, обычно токен хранится в localStorage.

localStorage аналогичен sessionStorage, за исключением того, что, хотя данные, хранящиеся в localStorage, не имеют срока действия, данные, сохраненные в sessionStorage, очищаются по окончании сеанса страницы, то есть при закрытии страницы.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Для получения токена во внешнем интерфейсе вы отправляете на URL адрес электронной почты и пароль пользователя, чтобы обменять его с токеном (вы должны быть в https).После этого вы сохраняете его с localStorage.setItem('key', value)

Краткий пример: 

$.post("/authenticate", {email: userEmail, password: userPassword}, function(data) {
  localStorage.setItem('token', data.token)
});

Для получения токена, например, после обновления, вы должны использовать: localStorage.getItem('key').

И, наконец, для аутентификации с помощью этого токена вы можете отправить его в заголовках канала в свойстве Authorization headers.
Почему канал?=> https://security.stackexchange.com/questions/108662/why-is-bearer-required-before-the-token-in-authorization-header-in-a-http-re

Пример: 

$.ajax({
    type: 'GET',
    url: '/account,
    headers: {
        "Authorization": "Bearer " + token
    }
}, function(data) { 
    // Authenticated data
});

Может помочь: https://github.com/auth0-blog/angularjs-jwt-authentication-tutorial/blob/master/frontend/login/login.js

...