JS에서 URL 매개변수 인코딩 및 디코딩 하는 법 ( How to encode and decode URL parameters in JS

 

1. encodeURIComponent();

• 전달되는 매개변수의 값이 노출되면 안 되는 경우
• 전달되는 매개변수의 값에 기호가 포함되어있는 경우
• 인코딩하여 전달하여야 한다.
• 매개변수 전달 시 key값에는 ' c__ ' 접두사를 반드시 붙여주어야한다. 안 해주면 url에서 매개변수 없어짐

 

 

1-1 : window.location.href

 

window.location.href

             = '/lightning/cmp/c__zz_Clvs_MDE_Template_Create_Url_Embedded?c__templateTitle=' +                                 

                 encodeURIComponent(encodedTitle);

 

---

1-2 : this[NavigationMixin.Navigate]()

 

this[NavigationMixin.Navigate]({

                type: 'standard__webPage',

                attributes: {

                    url: '/lightning/cmp/c__zz_Clvs_MDE_Template_Create_Url_Embedded?c__templateTitle=' +

                          encodeURIComponent(encodedTitle);

                }

 });

 

---

2. decodeURIComponent();

• salesforce에서 url로 호출 가능한 컴포넌트는 aura 컴포넌트 - LWC는 url로 직접호출 불가능
• component.get("v.pageReference")로 페이지 정보 가져오기
• state 통해 전달된 매개변수 값에 접근하기

 

var templateTitle

             = decodeURIComponent(component.get("v.pageReference").state.c__templateTitle);

 console.log('templateTitle 확인 ==== ' + templateTitle);

 

 

---

3. 내가 발견한 오류 상황 해결

• 화면에서 생성할 템플릿 제목 값을 입력받아 url로 새로운 컴포넌트 호출 시 매개변수로 값을 인코딩하여 전달하고 있음
• 입력받은 템플릿 제목 값에 '%' 문자가 포함되어 있으면 인코딩/디코딩이 안 되는 상황발생
• 인코딩하는 js파일에서 '%' 문자 개별적으로 인코딩 진행하여 전달 후 해결

 

const titleInput = this.template.querySelector('lightning-input[data-id="titleInput"]');     //입력받은 템플릿 제목 값

 

const encodedTitle = titleInput.value.replace(/%/g, '%25'); // % 문자 전달을 위함.       //'%'문자 인코딩

 

window.location.href = '/lightning/cmp/c__zz_Clvs_MDE_Template_Create_Url_Embedded?c__templateTitle=' +                                                    encodeURIComponent(encodedTitle);                                    //전체 값 인코딩 하여 전달