로그인 시 리다이렉트

사용자가 로그인하지 않은 상태에서 보안 페이지에 접근하면, 로그인 페이지로 리다이렉트되며 원래 페이지를 참조합니다. 로그인 후 다시 원래 페이지로 리다이렉트하려면 몇 가지 작업이 필요합니다. 현재는 Login 컴포넌트가 사용자 로그인 후 리다이렉트를 처리하고 있습니다. 이 기능을 새로 만든 UnauthenticatedRoute 컴포넌트로 옮기겠습니다.

먼저 쿼리스트링에서 redirect URL을 읽어오는 메서드를 추가하겠습니다.

src/components/UnauthenticatedRoute.tsx 파일의 import와 interface 아래에 다음 메서드를 추가하세요.

function querystring(name: string, url = window.location.href) {
  const parsedName = name.replace(/[[]]/g, "\\$&");
  const regex = new RegExp(`[?&]${parsedName}(=([^&#]*)|&|#|$)`, "i");
  const results = regex.exec(url);

  if (!results || !results[2]) {
    return false;
  }

  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

이 메서드는 읽고자 하는 쿼리스트링 파라미터를 받아서 반환합니다.

이제 이 파라미터를 사용하여 리다이렉트를 처리하도록 컴포넌트를 업데이트하겠습니다.

현재 UnauthenticatedRoute 함수 컴포넌트를 다음 코드로 교체하세요.

export default function UnauthenticatedRoute(props: Props) {
  const { isAuthenticated } = useAppContext();
  const { children } = props;
  const redirect = querystring("redirect");

  if (isAuthenticated) {
    return <Navigate to={redirect || "/"} />;
  }

  return cloneElement(children, props);
}

그리고 src/containers/Login.tsx 파일의 handleSubmit 메서드에서 다음 코드를 제거하세요.

nav("/");

또한, 다음 훅 선언도 제거하세요.

const nav = useNavigate();

마지막으로, 다음 import도 제거하세요.

import { useNavigate } from "react-router-dom";

이제 로그인 페이지는 로그인 후 리다이렉트됩니다.

변경 사항 커밋하기

지금까지 작업한 코드를 커밋하고 GitHub에 푸시해 보겠습니다.

$ git add .
$ git commit -m "React 앱 구축 중"
$ git push

이제 앱을 배포할 준비가 되었습니다.

다음으로 서버리스 앱을 프로덕션 환경에 배포할 예정입니다. 그리고 우리만의 도메인을 사용해서 배포할 거예요!