[TIL] Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

토큰에서 가져온 값을 라이브러리를 사용하지 않고 decode 하려고 하는데

Failed to execute 'atob' on 'Window':
The string to be decoded is not correctly encoded.

와 같은 에러가 떳다.

검색을 해보니 인코딩된 문자열이 atob 인코딩이 제대로 안된 문자라는 이야기 라고 한다.

const [headerB64, payloadB64, signatureB64] = token.split('.');

const payloadJson = JSON.parse(atob(payloadB64));

처음엔 위와 같은 코드로 작성을 했는데 로그아웃을 누르면 위와 같은 에러메시지를 보여주었다.

그래서 생각해보니 로그아웃을 하면 토큰이 사라지게 되고, 이때 토큰이 없으니 인코딩을 제대로 하지 못해서 나는 에러라고 생각해서
조건을 달아 주고, let 으로 전역변수를 선언해주었다.

  let payloadJson;
  let payload!: IPayload;
  const [headerB64, payloadB64, signatureB64] = (token || "").split(".");
  if (typeof atob !== undefined && payloadB64) {
    payloadJson = atob(payloadB64);
  }
  if (payloadJson !== undefined) {
    payload = JSON.parse(payloadJson);
  }

이렇게 하니 토큰이 없을 때도 에러메시지가 뜨지 않았다.
(token을 분리할때 Cannot read property 'split' of undefined
에러가 생겨서 or연산자를 사용해주었다.)