[TIL] #128. 240119

어제 목표 & 오늘 완료한 한 일 

• 알고리즘 문제 / SQL 문제
• Redis 공부
• 최종 팀 프로젝트
• 기술면접 대비

 

내일 목표

• 알고리즘 문제 / SQL 문제
• Redis 공부
• 최종 팀 프로젝트
• 기술면접 대비

 

발생한 문제와 해결 방법

1️⃣. 토큰이 만료되어도 프론트쪽에서 토큰 만료 사실을 모르는 문제

토큰이 만료되었는데 프론트쪽에서는 만료 기한을 몰라 쿠키가 그대로 남아있는 문제가 발생했다. 해당 문제로 인해 403 에러 페이지 조차도 볼 수 없고 하얀 화면이 보이는 문제점이 있었다. 그래서 토큰이 만료되면 항상 개발자도구 > Application에서 쿠키를 직접 지워 문제를 잠시나마 해결했었다.

해당 문제를 해결하고자 서버쪽 JwtUtil에서 response에 cookie를 넣어주기 전 setMaxAge()를 통해 만료기한을 알려주고자 해봤다. 하지만 무슨 이유 때문인지 넘겨준 값이 cookie에 들어가지 않아 expire/maxAge에 session이라고 나타난 것을 볼 수 있었다.

이는 sesion이 종료될 때 쿠키가 삭제된다는 것을 의미하는 것 같다. 이후에 시도해본 방법은 header에 만료기한을 담아주는 것이다. response header에 만료기한을 담아 보내줬더니 로그인 페이지 response header에서 만료기한을 확인할 수 있었다. 그래서 해당 만료기한을 가지고 만료되는 시간을 생성하여 cookie에 넣어줬더니 문제가 해결되었다. 문제가 해결되어 만료시간이 지나면 쿠키가 자동으로 삭제되는 것을 볼 수 있었다.

 

 

2️⃣. 쿠키를 가지고 있지 않을 때 로그인 페이지로 이동 불가

만료시간이 지나면 쿠키가 자동으로 삭제되고 관련 쿠키가 없으면 로그인 페이지로 이동하도록 하고자 했다. 하지만 만료시간이 지나면 로그인 페이지로 이동하지 못하고 403에러가 발생했다.

처음에는 js파일의 $(document).ready()에서 가져온 쿠키가 undefined면 공백을 리턴해주고 아니면 토큰을 리턴해주는 메서드를 호출하여 공백이 리턴되면 로그인페이지로 이동하는 코드를 작성해주었다. 그런데 계속해서 403 에러가 발생했다. 계속해서 살펴보다가 토큰이 만료되었기 때문에 접근권한이 없어 해당 과정조차도 해줄 수 없다는 것을 알게되었다.

그래서 시도해본 방법은 UserFrontController에서 쿠키를 가져와 그 길이가 0이면 로그인페이지로 리다이렉트 되도록 하는 것이었다. 그런데 앞에서 접근권한이 없어 요청을 할 수 없으니 UserFrontController쪽에 코드를 수정해줘도 로그인페이지로 이동하는 것은 당연히 불가능한 것이었다.

그래서 시도한 방법이 AuthenticationEntryPoint 인터페이스이다. 이를 구현하는 클래스를 생성하고 인증실패시 이동하는 페이지를 /login페이지로 작성해주었다. WebSecurityConfig에서 @Bean annotation을 통해 이를 bean으로 등록하여 SecurityFilterChain에서 이를 사용해주었더니 문제가 해결되었다.

추가적으로, 해당 코드에 .accessDeniedPage("/login")도 추가해주어 403에러가 발생했을 때 로그인페이지로 이동하게끔 해주었다.

 

느낀점

전에 했던 프로젝트에서도 그렇고 이번에도 그렇고 프론트쪽에서 토큰을 다루면서 막히는 것 같다. 그래서 해당 부분에서 소요된 시간이 상당하다. 오늘 발생한 문제로 인해 AuthenticationEntryPoint 인터페이스를 처음 알게 되었는데, 이런 경우에 사용하는 게 맞는지 잘 모르겠다. 이에 대한 이해도가 부족한 것 같아서 더 공부하고 알아봐야 할 것 같다.