쿼리스트링 데이터 넘길 때 값 짤리는 현상 encodeURIComponent

로그인이 필요한 서비스에 접근 시
비로그인일 경우 로그인 페이지로 이동이 될 것이다.

그리고 사용자 편의를 위해 로그인 후 이전 페이지로 돌아와 원래 하려던 작업을 할 수 있도록 소스 구현이 필요한데 아래와 같은 소스가 자주 사용된다.

location.href = "/login?returnUrl="+location.href;

이렇게 사용할 경우 손쉽게 처리가 가능하지만 한 가지 문제를 직면할 수 있다.

만약 location.href의 값이

 "/event/view?mbrId=abc&addr=korea&gender=M"

위와같이 되어 있고 위 정보들이 모두 필요하다면 서버에서 returnUrl은 mbrId=abc까지만 받아지고 그 뒤에 주소와 성별은 짤리게 되는 현상이다.

이는 뒤의 값을 다른 파라미터로 인식하여 생기는 것이므로 하나의 변수안에 &를 포함한 값을 넣고 싶다면 아래와 같이 변환하는 과정이 필요하다.

let url = location.href;
location.href = "/login?returnUrl="+encodeURIComponent(url);