로그인 UI 구현

Sol's·2023년 1월 30일

프로젝트

목록 보기
16/16

프로젝트를 진행하면서 기능들을 전부 Json으로 반환하여 Swagger로 확인했습니다.
그렇게 회원가입, 로그인, 시큐리티 설정, 댓글, 좋아요, list조회 기능을 만들었습니다.

그런데 문제는 UI를 만들때 어떻게 적용할지에 대한 고민이 생겼었습니다.

지금까지 가장 많이 했던 고민은 로그인 처리였습니다.

여러가지 방법이 있는것 같아습니다.
1. Cookie에 Jwt를 담는다.
2. LocalStorage에 Jwt를 담는다.
3. Session에 Jwt를 담는다.

Cookie에 Jwt 담기

전부 도전해 보았지만 많이 어려웠습니다.
Cookie에 담으려고 했지만 value값에 스페이스가 들어가지 않았습니다.
따라서 value에 Bearer 뒤에 토큰값을 넣어야 하는데 값이 들어가지 않았습니다.

여러 방법을 시도해보았지만, 스페이스가 +로 바뀌는 등 예상했던 정보가 들어가지 않았고 아직 해결중입니다.

LocalStorage에 Jwt 담기

자바 스크립트를 통해 LocalStorage에 Jwt를 담을 수 있었습니다.
하지만 요청 할때마다 자바스크립트를 사용해야해서 백엔드 개발자 입장에서는 불편하다는 느낌이 강했습니다.

Security Filter에서 요청시마다 토큰을 검증해야하는데 LocalStorage에 담겨있으니 자바스크립트를 통해 매번
LocalStorage의 값을 넣어줘야 했습니다.

이방법에 대해서는 더 좋은 방법이 있는지 고민을 해봐야 할 것 같습니다.

Seesion에 담기

Controller에서 바로 세션을 등록할 수 있기 때문에 Security Filter에서 Session을 확인하면 매 요청마다
권한을 조회 할 수 있었습니다.

느낀점

로그인을 어떻게 처리해야할까?

위의 고민을 통해서 로그인을 했을때 해킹에 대한 위험과 로그인 유지기간 설정을 통해 사용자 만족도를 높이는 방법들을 더 알게되었습니다.

Jwt를 통해 해킹에 대한 위험은 막았지만, 민감한 정보는 payload에 담을 수 없었습니다.

로그인을 처리하면서 정말 많은것을 배웠습니다.
Security의 동작원리도 더 잘알게된거 같아서 더 좋았습니다.

추가로 구현할 것

서에서 기본 정보를 조회하는 방법을 통해 해결하였고, Jwt토큰의 유지기간을 짧게하고 RefreshToken을 활용하여
사용자에게는 불필요하게 로그인을 여러번 하지 않게 하고, 서버에서 Redis를 통해 refreshToken이 살아있다면 accessToken을 발급하는 방법을 시도해볼 생각입니다.

Session과 다른점이 있다면, 매번 Session의 값을 요청하는게 아니라 AccessToken이 살아있다면 그냥 로그인이 되기 때문에 서버에서 조회하는 부담이 덜하다는 것입니다.

profile
배우고, 생각하고, 행동해라

0개의 댓글