들어가기전에..

• JWT 저장하기 위해 Web storage의 localStorage사용
  • 클라이언트쪽에서 token을 다루고 싶었고, CSRF로 부터 안전하기 때문에 Web storage의 Local Storage에 브라우저 창이 닫히더라도 데이터가 유지되기 위해 저장
• 로그인할때 서버로부터 acess 토큰과 refresh 토큰을 받고, localStorage에 저장
• 토큰를 활용하여 api요청을 (예를 들어, 자신이 쓴 댓글 수정, 삭제, 자신의 찜하기, 찜 취소)할때 활용
• JWT에 관련한 코드를 컴포넌트로 만들어서 재사용하기로 결정!

localStorage.ts

• localStorage의 메서드를 사용하여 JWT에 관련한 코드를 컴포넌트로 만듬

export const getLocalStorage = (key: string) => {
  try {
    const jwtToken = JSON.parse(localStorage.getItem(key) as string);
    return jwtToken;
  } catch (error) {
    return "";
  }
};

export const setLocalStorage = <T>(key: string, value: T): void => {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.log(error);
  }
};

export const removeLocalStorage = (key: string): void => {
  localStorage.removeItem(key);
};

Login.tsx

• 로그인시 localStorage에 저장
• axios 요청시 header에 토큰 달리도록 전역적으로 axios.defaults.headers.에 토큰을 달음

//나머지 코드 생략
    const postLogin = async () => {
      await axios
        .post(APIS.POST_LOGIN_JWT, { email: email, password: password })
        .then((res) => {
          let accessToken = res.headers.authorization;
          let refreshToken = res.headers.refresh;
          setLocalStorage("access_token", accessToken);
          setLocalStorage("refresh_token", refreshToken);
          let token = getLocalStorage("access_token");
          axios.defaults.headers.common.Authorization = token;
          dispatch(get(res.data));
          return res;
        })
        .then((res) => {
          if (res.data.userType == "관리자") {
            return navigate("/admin-reports");
          }
          window.location.replace("/");
        })
        .catch((error) => {
          if (error?.response?.status === 401) {
            toast.error("ID 또는 비밀번호가 일치하지 않습니다.", {
              position: "top-center",
              autoClose: 2000,
              hideProgressBar: false,
              closeOnClick: true,
              pauseOnHover: true,
              draggable: true,
              progress: undefined,
              theme: "light",
            });
          }
          console.log(error);
        });
    };
    postLogin();
  };
//나머지 코드 생략