프런트엔드에서 JasonWebTokens 디코딩

JasonWebTokens (JWT) 에서 배운 것처럼 로그인한 사용자에 대한 임의 토큰을 생성할 수 있습니다.

이 토큰은 다음 스니펫에서와 같이 시스템에 로그인하는 동안 전달한 사용자 매개변수로 구성됩니다.

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

위의 코드 스니펫에서 userId 및 userEmail를 전달하여 JWT를 생성했습니다. 토큰이 생성되면 아래 이미지와 같은 문자열이 생깁니다.

토큰을 디코딩

때로는 해당 토큰을 생성하는 동안 전달한 세부 정보를 가져와야 하는 상황에 처할 수 있습니다. 이 경우 토큰을 디코딩해야 합니다.

토큰을 받았다고 가정하고 다음 단계에 따라 토큰을 디코딩합니다.

토큰을 수락하는 함수를 만듭니다.

  // create a function to accept the token
  function parseJwt(token) {

  }

함수에서 토큰이 유효한지 확인하십시오. 유효하지 않은 경우 다음과 같이 return로 작업을 종료합니다.

  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];
  }

-를 +로 교체; _ in / in 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가 데이터를 인코딩하고 시스템 보안 광고를 강력하게 만드는 방법을 제공하는 것처럼 이를 디코딩하는 방법도 있습니다. 이 튜토리얼은 의심할 여지없이 작동 방식과 이를 달성할 수 있는 방법을 단계별로 보여주었습니다.

읽어 주셔서 감사합니다.