상황

로그인 하지않은 사용자가 접근하면 안되는 페이지에 접근했을 때 로그인 페이지로 이동 시켰다가 로그인 또는 회원가입을 한 후에 처음 접근을 시도했던 페이지로 다시 리다이렉트 시켜야하는 상황

문제 1

문제 1

UI/UX 혼란 - 잘못된 리다이렉트 로직으로 인해 사용자가 로그인 또는 회원가입 페이지로 계속 이동하여 루프가 발생할 수 있다.

해결 1

1. 직접 헤더에 있는 로그인 버튼을 클릭하여 로그인/회원가입을 시도한 경우 ‘로그인’버튼을 클릭한 페이지로 이동 시킨다.
2. 로그인이 필수적으로 필요한 페이지에 접근하여 로그인 페이지로 리다이렉트된 경우라면 로그인/회원가입 후 원래 접근하여던 페이지로 리다이렉트 시킨다.

위 두가지 방법으로 동작하도록 설계하여 혼란을 최대한 방지할 수 있도록 했다.

if (from === 'button') {
  history.goBack();
} else {
  history.replace(`${from.pathname}`);
}

문제 2

문제 2

리다이렉트 경로 관리 - 사용자가 로그인 또는 회원가입 후 원래 접근하려던 페이지로 리다이렉트 시키기 위해 접근한 페이지 경로를 저장해야한다.

해결 2

react-router-dom의 기능 중 다음으로 이동할 페이지에 상태값을 전달할 수 있는 state props을 이용하여 로그인 전 어느 페이지에서 왔는지를 전달하여 해결한다.

최종 해결

PrivateRoute 컴포넌트를 생성하여 react-router-dom의 Redirect, Route를 이용하여 Local Storage에 Refresh Token이 없다면 로그인 하지 않은 사용자, 있다면 로그인한 사용자로 판단하여 로그인을 한 사용자라면 원래 접근하려던 페이지로 가고 비로그인 사용자면 로그인 페이지로 리다이렉트 시키도록 했다.

아쉬운 점

로그인 여부를 판단하는 것이 단순히 Local Storage에 Refresh Token 존재 여부로만 판단한 것이 아쉽다. 또, 한 함수에 여러 기능을 하는 코드를 다 작성하지 않고 함수나 컴포넌트로 따로 분리해서 코드를 작성하고 싶다.