Merge : 로그인 통신 코드

[future9061]

• 사용자의 이메일, 비밀번호를 입력받고 토큰을 발급받는다. related to 로그인 통신(JWT) #31

PR 체크리스트

아래 항목을 확인해 주세요:

• 커밋 메시지가 우리의 가이드라인을 따르고 있는지 확인하세요
• 변경 사항에 대한 테스트가 추가되었는지 확인하세요 (버그 수정 / 기능 추가)
• 문서가 추가되거나 업데이트되었는지 확인하세요 (버그 수정 / 기능 추가)

PR 유형

이 PR은 어떤 종류의 변경을 가져오나요?

• 버그 수정
• 새로운 기능 추가
• 코드 스타일 업데이트 (서식, 로컬 변수)
• 리팩터링 (기능 변경 없음, API 변경 없음)
• 빌드 관련 변경
• CI 관련 변경
• 문서 내용 변경
• 애플리케이션 / 인프라 변경
• 기타... 설명:

관련 이슈

이슈 번호: #31

새로운 동작은 무엇인가요?

사용자 로그인 기능 구현

• 모든 양식을 작성하지 않으면 사용자에게 에러 문구를 노출한다.
• 입력받은 데이터를 서버에 요청한다.
• access token을 발급받아 headers default 값으로 적용한다.
• access token의 유효 시간이 만료되면 refresh token으로 재발급을 요청한다.

이 PR은 호환성 변경을 도입하나요?

• 예
• 아니요

기타 정보

참고 게시글

https://velog.io/@badahertz52/%ED%94%84%EB%A1%A0%ED%8A%B8-%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-JWT-AccessToken-RefreshToken-%EB%8B%A4%EB%A3%A8%EA%B8%B0

Snapshot

코드 리뷰

// src > apis > auth > FetchLogin.ts


export const onLogInSuccess = async (response: AxiosResponse) => {
  const { accessToken, expiresIn } = await response.data.data;

  httpClientForCredentials.defaults.headers.common['Authorization'] =
    `Bearer ${accessToken}`;

  const currentTime = new Date(Date.now());
  const tokenExpirationTime = new Date(Date.now() + expiresIn * 1000);
  const refreshTime = tokenExpirationTime.getTime() - currentTime.getTime();
  console.log('accessToken', response.data.message);

  setTimeout(() => {
    FetchRefreshToken();
  }, refreshTime);
};

export const FetchRefreshToken = async () => {
  try {
    const res = await httpClientForCredentials.get('/auth/refresh');

    if (res.status === 200) {
      onLogInSuccess(res);
      console.log('refresh', res.data.message);
    }
  } catch (err) {
    const axiosError = err as AxiosError;
    if (axiosError.response?.status === 401) {
      alert('로그인 해주세요');
    }

    throw new Error();
  }
};

export const FetchLogIn = async (data: LoginData) => {
  try {
    const response = await httpClientForCredentials.post('/auth/login', data);

    if (response.status === 200) {
      onLogInSuccess(response);
    }
  } catch (err) {
    console.log('로그인 에러 발생', err);
    throw new Error();
  }
};

[Zamoca42]

토큰 만료시간을 설정한 이유가 있으신가요?