[Angular] 새로고침시 변수 초기화 된 것들을 불러올 때.

이전 프로젝트를 진행하면서 겪었던 증상이다.

Front : Angular

Back : Kotlin/SpringBoot

 

위 개발 스펙으로 개발을 진행하고 있었고, Front에서 카드 결제 로직을 호출해야 했었다.

(카드 결제 로직은 자체개발이 아닌, 특정 업체에서 제공한 Library를 Import해서 처리하는 방식으로 사용하고 있었다.)

 

특정 업체에서 제공한 Library를 Import는 잘 했고, 안에 있는 함수까지 잘 호출했는데 해당 Library에서 결제가 끝난 후에 Response를 줄 때 우리한테 Redirect Code를 전달하는 것이 문제였다.

(Http Status Code 302)

 

Angular에서는 새로고침이 될 경우 모든 변수가 초기화가 되는데, 결제가 완료되도 로그인 세션을 유지하고, 로그인한 회원에 대해 정보를 유지하려면 변수들이 초기화가 되면 안됐다.

(왜냐면 결제 후에도 사용자가 정상적으로 사용할 수 있게 사용자의 정보는 유지가 되어야하니까...)

 

이것을 해결하기 위해서 많은 방법을 시도했다.

1. Session 에다가 정보를 담아놓고, 특정 페이지로 Redirect되면 이 정보들을 싹 다 불러오자!

→ 이거는 채택을 안했다. 왜냐면 사용자의 정보는 민감한 개인정보가 들어있을 수 있는데 Session에다가 그정보를 저장한다는 것은 무리가 있다고 판단을했다.

만약 민감한 정보가 없다면 이 방법을 사용해도 될 것이다.

 

2. 결제 모듈을 호출 후 특정 페이지로 리턴값을 주라는 속성을 줄 수 있었는데, 이것을 Spring으로 돌려놓고, Spring에서 Http Status Code를 조작해서 넘겨주자!

→ 이 방법은 시도했으나 실패했다. ServletResponse에서 Status Code를 조작하는 것은 불가했기 때문이다.

Same Origin이 아니고 Front Server 따로, Spring Server 따로 구동되는 상황이었기 때문에 조작이 불가했다.

 

이 외에도 참 많은 방법들을 연구하고 사용하려 하였으나 전부 다 실패했다.

그래서 고심 끝에 내린 결론은 아래였다.

 

1. 결제 함수를 호출하기 전 Native Application에 사용자의 정보를 모두 저장하는 함수를 실행.

(Hybrid App을 제작하였기 때문에 가능했던 일이다.)

→ Javascript Interface Annotation을 달고 Webview에 Inject 시켜주면 Native에 있는 함수도 Front JS 딴에서 사용할 수 있다.

 

2. 결제 모듈에다가 Redirect되는 주소를 Spring Boot로 설정.

 

3. 결제 함수를 호출하게 되면 Angular의 특정 페이지로 이동을 시킴

(해당 페이지 내부에서는 Websocket을 Spring과 연결시켜 데이터를 계속 받는다.)

 

4. 결제 모듈에서 결제가 완료되어 Spring쪽으로 응답이 전달 되었을 때, Spring에서는 해당 응답을 Websocket으로 전달.

 

5. Websocket에서 Data를 정상적으로 받게되면, Native Application에 있던 사용자의 정보를 불러오는 함수를 실행

 

6. 기본적인 정보를 Validation하고 문제가 없을 경우에 Application에서 정보를 다시 불러오기로 진행.

→ 사용자의 ID가 Key기 때문에 해당 ID만 있으면 필요한 정보들은 언제든 다시 불러올 수 있었다.

 

위 방법으로 하니 사용자의 민감한 정보를 관리하기도 편하고, 다시 불러올 수도 있었다.

Cost가 좀 많이 들긴 하지만.. 어쩔 수 없이 위 방법으로 진행했다.