[개발노트] Spring Security + JWT + React(SPA) 진행 상황

프로젝트를 위해 정리한 글입니다. (진행중)

 

1) 시큐리티 공부 전 인증/인가에 대한 개념 이해하기 [10분 테코톡] (완료)
- [토니 | 인증과 인가]
   - 인증하기 : Request Header
   - 인증 유지하기 : Browser의 cookie나
   - 안전하게 인증하기 : Server
   - 효율적으로 인증하기 : Token
- [루피 | 인증과 인가]
   - 다른 채널을 통해 인증하기 : OAuth
- [작은곰 | 스프링 시큐리티]

 

 

2) 코드 따라치면서 공부 [데어 프로그래밍 강의] (완료)
[참고 : 데어 프로그래밍 스프링 시큐리티]
- 스프링 시큐리티와 OAuth2.0 기반 소셜로그인 기능 스프링부트 프로젝트 만들기
- JWT 토큰으로 REST API방식 사용 전에 알아야 할 지식들
   - 세션이란?
   - TCP 통신이란?
   - CIA란?
   - RSA란?
   - RFC문서란?
   - JWT 구조 이해하기
- 스프링 시큐리티와 Jwt 토큰 기반 로그인 방식 스프링부트 프로젝트 만들기

 

 

3) 커스터마이징 전 스프링 시큐리티 기본 개념 쌓기(권한 요청시 인가하는 방식이 잘 이해가 안되었다.) (완료)
- [참고 : 스프링 시큐리티 구조, 필터 종류와 사용이유] 
- 알아낸 것 : 강의에서 BasicAuthenticationFilter는 인가가 필요한 주소 요청에만 동작한다고 설명하고 있지만, 실제 테스트 후 모든 요청에 동작한다는 것을 알게됨.
- BasicAuthenticationFilter(jwtAuthorizationFilter) : 'HTTP 기본 인증 헤더를 감시하여 처리한다.'라고 설명되어 있음.
- 아마 모든 요청에서 doInternalFilter를 실행시켜서 인증헤더가 존재하는지 감시하는 듯하다.
- 따라서 jwtFilter를 받아와서 null값인지 확인하는 부분에서 if와 else로 나눠서 doFilter(req,res)가 동작하게 만들어야 null Point Exception이 발생하지 않는다.

 

 

4) 우리 프로젝트에 적용해보기
**현명님이 찾아주신 security + react(spa) + spring + jwt/oauth2 자료

 

[3-PART1] 백단에 스프링 시큐리티 적용 (완료)

 

 

- '/login'(인증)요청 처리 (완료)
- 'Authentication'헤더와 함께 오는 권한 필요한 주소 처리 (완료)
- MemberController에서 테스트 (완료)

 

[3-PART2] 프론트단 개발환경 세팅 (완료)
- React 어플리케이션 삭제 후 재빌드 (완료) 

   - [참고: Spring + React 연동 gradle 사용] 
- React 어플리케이션 설치와 빌드를 위한 명령어들 : npm, yarn(window사용시 추천)
- 문제점 : 희상오빠가 준 링크대로 다시 빌드해봐도 security 적용시킨 이후부터 리액트가 8080포트 사용 못함(계속 403 method not allowed 에러 발생)
- 해결 : 프론트 포트 따로 두고(4200) 리액트 앱 부분 따로 실행 => 서버(8080)에 로그인 요청

 

***(더 참고하면 좋을 거 같은 자료) 리액트 + 스프링부트 (미완)
- [데어프로그래밍 Spring boot & React] 

 

 

[3-PART3] 프론트단에서 '/login' 요청에 대한 응답(JWT) 받고 localStorage에 세션 저장하기 (완료)
- [참고 : Spring Security + React + JWT]

 

 

- AuthenticationService.js : 로그인/로그아웃 관리 서비스 레이어 생성

   - 로그인 페이지에서 실행할 함수를 비롯해 로그인 요청, 사용자 세션, 로그아웃에 관한 모든 함수를 가지는 컴포넌트

- LoginComponent.jsx : 로그인 컴포넌트 생성

   - SPA에 뿌려질 렌더링 내용

   - loginClicked 콜백 함수로 로그인 요청, 응답 다시 렌더링

      - AuthenticationService import 해서 사용

- LoginApp.jsx : 앱 내의 라우팅을 설정해줄 컴포넌트 생성

- App.js :  LoginApp 컴포넌트 연결

 

[3-PART4] 뷰 설정 :  login 페이지, join 페이지

 

 

[3-PART5] 라우팅, 로그인 세션 관리 설정

 

 

4) GIT STUDY
- `3-PART2` 건드리는데서 코드가 완전 꼬였다.. 마지막 커밋한 시점으로 돌아갈 방법을 찾았다. [참고] 
   - commit하지 않아서 unstaged(untracked) 상태인 파일의 경우 파일을 모두 날리는 명령어
      : git clean -fdx
   - 삭제 이후 원격 저장소에 있는 브런치 내용으로 덮어쓰기
      : git pull origin feature/Client