서버 사이드 렌더링(getServerSideProps) 환경에서 인증 로직 사용하기

[punchdrunkard]

서버 사이드에서는 모듈화된 API 대신, axios 객체를 직접 만들어서 사용해주세요.
인증이 필요한 경우에는 authorizeFetch 함수를 사용하시면 됩니다.
예제를 참고해주세요!

예제

export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const accessToken = context.req.cookies['ACCESS_TOKEN'];
  const refreshToken = context.req.cookies['REFRESH_TOKEN'];

  const getUpcomingURL = `${process.env.NEXT_PUBLIC_API_END_POINT}api/v1/exhibitions/upcoming?page=0&size=8`;
  const getMostLikeURL = `${process.env.NEXT_PUBLIC_API_END_POINT}api/v1/exhibitions/mostlike?page=0&size=8&include-end=true`;

// 인증이 필요한 경우
  if (accessToken && refreshToken) {
    const { data: upcomingExhibitionRes } = await authorizeFetch({
      accessToken,
      refreshToken,
      apiURL: getUpcomingURL,
    });
    const { data: mostLikeExhibitionRes } = await authorizeFetch({
      accessToken,
      refreshToken,
      apiURL: getMostLikeURL,
    });

    return {
      props: {
        upcomingExhibitions: upcomingExhibitionRes.content,
        mostLikeExhibitions: mostLikeExhibitionRes.content,
      },
    };
  }

// 인증이 필요하지 않은 경우
  const getUpcoming = axios.get(getUpcomingURL);
  const getMostLike = axios.get(getMostLikeURL);

  const [upcomingExhibitionRes, mostLikeExhibitionRes] = await Promise.all([
    getUpcoming,
    getMostLike,
  ]);

[punchdrunkard]

관련 PR

• hotfix: 서버사이드 인증 관련 문제 해결 #301
• refactor: 토큰 관련 로직 모듈화 및 상수 분리 #328