[리액트] 프론트 로그인 구현- JWT 이용

일반적으로 로그인에서 사용하는 토큰은 단순한 문자열이다. 따라서 발급된 토큰에 대해 만료를 시킬 수단이 없고, 관리할 수 있는 방법이 없다는 단점이 있다. 이를 보완하기 위해 JWT(Javascript Web Token)을 사용한다!!

 

참고) 여기서 클라이언트단은 리액트, 서버는 장고를 이용하였다.

- 로그인 절차 (JWT) 이용

JWT 절차를 간단하게 설명하자면,

- JWT에는 accessToken과 refreshToken이 존재하며, 유저 인증에 사용된다. 실질적인 인증 정보는 accessToken에 있지만, 일정 시간이 지나면 만료하는 구조를 갖는다.

- refreshToken, accessToken을 클라이언트에 저장해둔다. 이때, refreshToken을 이용하면 로그인은 지속적으로 유지할 수 있다. refreshToken을 서버에 보내면 그때마다 새로운 accessToken을 발급해 돌려주는 것이다.

- accessToken을 필요할 때 서버에 보내면 서버는 토큰이 유효한지 확인한다.

 

- 로그인 로직

export const requestLogin = async (email, pw) => {
  return await axios
    .post(
      `${serverURL}/login/`,
      {
        email: email,
        password: pw,
      },
      { withCredentials: true }
    )
    .then((response) => {
      /// token이 필요한 API 요청 시 header Authorization에 token 담아서 보내기
      axios.defaults.headers.common[
        "Authorization"
      ] = `Bearer ${response.data.access_token}`;
      return response.data;
    })
    .catch((e) => {
      console.log(e.response.data);
      return "이메일 혹은 비밀번호를 확인하세요.";
    });
};

 

 

 

 

 

❗❗ 하지만, 사이트 창을 껐다가 다시 켜거나, 사용자가 새로고침 했을 때 refreshToken은 사라지게 된다.

이를 방지하기 위해 새로운 accessToken을 반환하는 /token/refresh API를 추가하였다.

- refreshToken으로 accessToken 받아오기

앞서 설명했던 내용을 코드로 작성하였다. 

(작성하고 보니 참고란에 작성한 글에 설명과 코드가 있었다..! 이를 참고해도 좋을듯)

export const requestAccessToken = async (refresh_token) => {
  return await axios
    .post(`${serverURL}/token/refresh/`, {
      refresh: refresh_token,
    })
    .then((response) => {
      return response.data.access;
    })
    .catch((e) => {
      console.log(e.response.data);
    });
};

export const checkAccessToken = async (refresh_token) => {
  if (axios.defaults.headers.common["Authorization"] === undefined) {
    return await requestAccessToken(refresh_token).then((response) => {
      return response;
    });
  } else {
    return axios.defaults.headers.common["Authorization"].split(" ")[1];
  }
};

accessToken이 필요할 때, checkAccessToken을 호출한다.

이때, accessToken이 undefined면 새로 불러서 설정해주고, 아니라면 원래 있던 token을 반환한다.

 

split을 해서 1번 인덱스를 불러온 이유는

JWT에 대한 데이터를 교환하므로 인증 타입으로 Bearer가 사용되는데, 

axios.defaults.headers.common ["Authorization"]로 토큰을 불러오면 Bearer가 붙어서 오기 때문이다. (즉, 인증 타입을 떼고 반환)

 

솔직하게 말하자면, 이렇게 하는 게 정확한 방법인지 확신이 없다.

참고 블로그를 보는 게 더욱 좋을 거 같다!!

 

 

 

 

- 참고 

취약점, 보안에 관한 설명도 나와있다.

🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)