[React] 로그인 후 이전 페이지로 이동 구현

 

지금까지의 프로젝트는 로그인을 해야만 서비스를 이용할 수 있어 항상 로그인 성공 시 메인페이지로 이동시켰습니다.
하지만 이번 프로젝트에서는 일부 기능만 회원 전용이기 때문에 비회원도 자유롭게 사이트를 구경할 수 있습니다.
만약 비회원이 회원만 이용가능한 서비스를 원한다면 로그인을 할 수 있도록 로그인 페이지로 이동시키고, 그 상태로 로그인 이후에 본래 서비스를 이용할 수 있게 해주어야 하므로 메인페이지가 아닌 이전 페이지로 이동시켜주어야 합니다.

기존 코드는 이렇게 구현되어 있었습니다.

// 로그인이 필요한 특정 행동을 했을 경우

if (!sessionStorage.getItem("token")) {
  MySwal.fire({
    title: "로그인 후 이용해주세요.",
    icon: "warning",
    confirmButtonColor: "#feec91",
    confirmButtonText: "확인",
    reverseButtons: true,
  });
  navigate("/login");
}

// LoginPage.jsx

function loginSubmit(e) {
    e.preventDefault();
    dispatch(login(loginInfo)).then((res) => {
      if (res.error) {
        ...
      } else {
          navigate("/");
        }
      ...
    });
  }

비회원이 로그인이 필요한 행동을 했을 경우 로그인 요청이 성공한다면 메인페이지로 이동합니다.

경고창과 함께 로그인 페이지로 이동

 

하지만 만약 어떤 웹툰을 평가하기 위해서 클릭했을 경우,

평가를 위해서 로그인을 했지만 메인페이지로 이동 된다면 평가하려던 웹툰을 다시 찾아가야하는 번거로움이 생깁니다.

그렇기 때문에 로그인 이 후 해당 웹툰으로 다시 돌아갈 수 있도록 해야합니다.

react-router-dom에서 제공하는 useLocation 함수를 이용하여 손쉽게 해결할 수 있었습니다.

const { pathname } = useLocation();

if (!sessionStorage.getItem("token")) {
  ...
  navigate("/login", { state: pathname });
}

로그인 페이지로 보내면서 이 전 페이지로 보낼 url주소 (pathname) 도 함께 보내줍니다.

const { state } = useLocation();

function loginSubmit(e) {
    e.preventDefault();
    dispatch(login(loginInfo)).then((res) => {
      if (res.error) {
        ...
      } else {
        if (state) {
          navigate(state);
        } else {
          navigate("/");
        }
        ...
      }
    });
  }

로그인 페이지에서는 저장된 state가 있다면 로그인에 성공했을 때 이 전 페이지로 이동시킵니다.