로그인 후, 기존페이지로 리다이렉트 하기

 

특정페이지를 접속 시 로그인이 필요할 때가 있다.

로그인 완료 후 원하는 특정페이지로 바로 들어갈 수 있다면 

로그인 후에 단순 홈으로 갈때 보다 훨씬 좋은

사용자 경험을 제공할 수 있을 것이다.

 

해당 방식을 프런트에서 구현하려면 두 가지 방법이 있다.

 

1. 링크에 redirect 할 값을 추가해둔다.
 https://www.musinsa.com/auth/login?referer=https%3A%2F%2Fwww.musinsa.com%2Fmember%2Fmypage 
무신사 로그인 페이지 주소이다.

url뒤에 referer=....로 로그인 이후에 갈 페이지 정보를 표시해서 해당 값으로 이동하게 한다.

 

 

2. useNavigate()의 navigate 함수를 통해 props를 넘겨준다.

 

 

 

위 두 방법의 장단점은 확실하다.

첫번째는 url만으로 다 처리가 가능하고,

페이지 새로고침이 되어도 정보가 유지된다.

다만 정보가 url에 다 보인다는 점이 있다.

 

반면 두 번째는 여타 정보를  url에 노출하지 않기에 깔끔하지만,

페이지 새로고침시에 들고있던 정보가 사라지는 단점이 있다.

 

상황에 맞는 방법을 선택해서 진행하면 될듯하다.

여기선 두 번째 방법을 가볍게 체크해보려고 한다.

 

 

---

 

2. useNavigate()의 navigate 사용하기

 

router 쪽에서 로그인 체크후에 /login페이지로 강제 이동시킬때, 

navigate 함수에 pathname을 추가해서 보낸다.

const { pathname } = useLocation();

useEffect(() => {
    if (토큰이 없을때 && 로그인 페이지가 아닐때) {
      navigate("/login", { state: pathname });
    }
}, [pathname]);

 

 

그리고 로그인 페이지에서 state값을 불러와서

로그인 성공시에 해당 페이지로 이동하게끔 해주면 된다.

다만!!! 여기서 유저의 새로고침등의 행동으로 값이 없어질 수 있기 때문에 

기본값도 잊지말고 추가해주는 꼼꼼함이 필요하다!

const { state } = useLocation();

const redirectUrl = state || "/home";  // state가 없을때를 대비한 기본값 /home
navigate(redirectUrl);