스프링 시큐리티 Session 인증 + React 로그인 문제

과제 프로젝트를 진행하던 중 어느정도 기능 구현이 완성되고 실 테스트 단계에 들어갈 때, 관리 시스템에 로그인 기능이 꼭 필요하다는 결론이 나왔다. 남은 시간이 별로 없었기에 여러 방법 중 코드 구현이 비교적 짧은 Session 기반 로그인 기능을 사용해보았지만 리액트와 연도에서 근본적인 문제가 발생했다.

 

1. 문제 발생

Session(이하 세션) 인증 로직을 구현하고 React에 쿠키를 통해 세션 정보를 보낼 때 세션이 유지되지 않는 문제가 발생했다.

분명히 포스트맨이나 테스트 코드로는 세션이 존재하고 쿠키값도 넘어와서 사용했지만 React에서만 유지되지 않았다.

이 문제를 CORS 이슈라고 하는 것 같다. 이는 다음에 다뤄보겠다.

React와 Spring의 포트가 다르기 때문에 React에서 서버에서 관리하는 세션에 접근하려고 할 때 

프로젝트를 함께 진행하는 프론트 담당 동기와 함께 밤을 세면서 여러 방법을 찾아보았다.

 

a. Redux로 상태값 강제 변경

이 방법은 프론트 동기가 Redux에 대한 학습이 따로 필요했고 쉽지 않은 기술이라 판단했기 때문에 포기했다.

 

b. React package.json에 proxy 추가

https://velog.io/@pjj186/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-%EC%97%B0%EB%8F%99-CORS-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0

 

이 분이 사용했던 방식을 사용해보았다. proxy에 스프링이 실행되는 Origin을 추가하여 포트 문제를 해결하는 방식인데

차례대로 적용하고 테스트해보았지만 뭐가 문제인지 리액트 실행은 잘되는데 세션 id가 있는 쿠키가 넘어오긴하는데 계속 똑같은 값만 존재한다....

그래서 이 방법도 포기...

 

c. CrossOrigin 어노테이션

@CrossOrigin("http://localhost:3000")

 

모든 컨트롤러에 위 어노테이션을 붙여서 React와 통신임을 인식시켰다.

스프링부트 2.7.15버전이었기 때문에 해당 기능을 지원해줘서 CORS를 스프링을 통해 설정할 수 있다고 한다.

@CrossOrigin을 통해서 원하는 도메인과 요청 사항을 허용할 수 있어 해당 컨트롤러에 붙이는 것으로 React와 통신이 가능하다고 한다.

근데 이상하게 작동이 안된다. 있으나 없으나 똑같이 React에 쿠키를 보낼 수 없고 쿠키를 받을 수도 없었다....

2. 결론

그냥 세션 방식을 포기하고 조금 시간이 걸리더라도 JWT를 사용하기로 했다.

세션 방식을 사용할 때 새로고침 시 초기화되는 문제도 있고 서버 딴에서 관리하는 세션을 사용하기에는 당장에는 좋을지 몰라도 서버에 부하가 되는 문제도 있었기 때문이다.

JWT를 사용하는 것이 쉽지는 않겠지만 React같은 다중 서버 환경에서도 유지할 수 있고 여러 도메인에서 함께 사용할 수 있다고 하니 이 방식이 미래를 보더라도 맞다고 생각했다.

 

막막하다... 코드 이해하는데만 한 세월 걸릴 것 같다. 그래도 방법은 찾아서 다행이다....

 

 

추신

세션 로직 참조

https://chb2005.tistory.com/176

[Spring Boot] Spring Security를 사용한 로그인 구현 (Form Login)

세션 인증 로직에 대한 설명과 코드가 잘 정리되어있어서 이 분의 로직을 참조하여 만들었다.