Рубрики
Без рубрики

Декодирование Jasonwebtokens на frontend

Jasonwebtokens (JWT) Как мы узнали в аутентификации-с-Nodejs-and-mongodb-Part-3, позволяют нам C … Теги с JavaScript, JWT, Frontend, учебником.

Jasonwebtokens (JWT) Как мы узнали в Аутентификация-с-Nodejs-and-mongodb-part-3 Позволяет нам создать случайный токен для зарегистрированного пользователя.

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

        //   create JWT token
        const token = jwt.sign(
          {
            userId: user._id,
            userEmail: user.email,
          },
          "RANDOM-TOKEN",
          { expiresIn: "24h" }
        );

От фрагмента кода выше, мы прошли в Идентификатор пользователя и UserMail создать JWT. Когда токен создан, у нас есть строка, как мы находим на изображении ниже:

Декодировать токен

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

Предполагая, что вы получили токен, декодируйте токен после этих шагов:

  • создать функцию, чтобы принять токен
  // create a function to accept the token
  function parseJwt(token) {

  }
  • В функции проверьте, действителен ли токен. Если недействительно, прекратите операцию с помощью вернуть вот так:
  function parseJwt(token) {

    // terminate operation if token is invalid
    if (!token) {
      return;
    }

  }
  • Разделить токен и взять вторую; Передайте его в постоянную (Base64URL) вот так:
function parseJwt(token) {
    // terminate operation if token is invalid
    if (!token) {
      return;
    }

    // Split the token and taken the second
    const base64Url = token.split(".")[1];
  }
  • Заменить - с + ; _ с / в Base64URL постоянна и назначьте его новую константу, как так
function parseJwt(token) {
    // terminate operation if token is invalid
    if (!token) {
      return;
    }

    // Split the token and taken the second
    const base64Url = token.split(".")[1];

    // Replace "-" with "+"; "_" with "/"
    const base64 = base64Url.replace("-", "+").replace("_", "/");
  }
  • Наконец, верните результат, проанализированный в JSON, например,
function parseJwt(token) {
    // terminate operation if token is invalid
    if (!token) {
      return;
    }

    // Split the token and taken the second
    const base64Url = token.split(".")[1];

    // Replace "-" with "+"; "_" with "/"
    const base64 = base64Url.replace("-", "+").replace("_", "/");
  }

  // return the result parsed in JSON
  return JSON.parse(window.atob(base64));
  • Теперь вы можете просто позвонить в функцию и пройти в токене по вашему выбору, подобное:
  // loggedin user
  const user = parseJwt(token)

Окончательный код

  // decode the logged in user
  function parseJwt(token) {
    if (!token) {
      return;
    }
    const base64Url = token.split(".")[1];
    const base64 = base64Url.replace("-", "+").replace("_", "/");
    return JSON.parse(window.atob(base64));
  }

  // loggedin user
  const user = parseJwt(token)

Вывод

Так же, как JWT дает нам способ кодировать данные и сделать нашу систему обеспеченную системой AD надежным, у нас также есть способ расширить его. Этот учебник, несомненно, показал нам шаг за шагом, как это работает и как мы можем достичь этого.

Спасибо за чтение.

Оригинал: “https://dev.to/ebereplenty/decoding-jasonwebtokens-on-the-frontend-4gpm”

Читайте ещё по теме: