본문 바로가기

분류 전체보기202

[Vue.js] 22. use Vuex 이번에는 Vuex에 대해서 알아보겠습니다. Vuex는 vue.js로 제작한 web application에 대한 상태를 관리할 수 있도록 기능을 제공하는 Library입니다. 해당 application내 모든 components에 대한 공용저장공간이라고 생각하면 될 것 같습니다. 예를들면, 이전에 JWT를 구현하기 위해서 사용한 Session Storage도 공용저장공간의 역할을 수행하지요. SPA로 제작하는 web application의 경우에는 다양한 components가 동일한 data를 참조해야 할 수 있습니다. 해당 data는 유기적으로 변하지만 어느 시점에서는 모두 동일하게 보여야 하는 것이죠. 이를 좀더 구체화된 단어로는 state(상태)라고 Vuex에서는 정의합니다. 그리고 이 state를 .. 2021. 4. 29.
[Vue.js] 21. axios interceptors Spring Boot에서 기존에 JWT를 통한 인증을 포함하는 RestAPI를 구현할 때, Interceptor라는 것이 있었습니다. 이 기능은 httpRequest와 httpResponse를 진행하기 전에 잠시 application에서 가로채서 특정 동작을 수행 후 다시 동작을 수행하게 해주는 기능입니다. Spring Boot에서는 HandlerInterceptor interface를 implements하고 관련된 method를 @Override하여 사용했습니다. Controller에서 해당 요청을 처리하기 전에 동작하는 preHandle( ), 이후에 동작하는 postHandle( ) 이런식으로 구성이 되어 있습니다. 그렇다면, SPA를 제공하는 vue.js와 같은 곳에서는 이런 기능을 사용할 수 없.. 2021. 4. 27.
[Spring Boot] 34. JWT 인증 갱신처리 (3) 이제 JWT를 통한 인증처리의 마지막 단계입니다. Back-End에서 Access Token과 Refresh Token을 발급하여, Front-End를 통해서 개별 사용자 환경에 해당 Token들을 저장하는 로직을 구현하였고, 더 나아가 Front-End에서는 사용자의 Token의 Expiration을 확인하여 조건에 따라서 Token을 전달하는 로직까지 구현하였습니다. 중간에 Refresh Token에 대한 DB에 저장하는 로직 등 추가적인 내용도 여럿 있었습니다. 최종적으로 Access Token의 만료로 Back-End에 Refresh Token을 전달할 때, Back-End에서 처리하는 로직에 대해서 구현해 보도록 하겠습니다. 이를 위해서는 Front-End와 Back-End에 각 각 로직이 모두.. 2021. 4. 26.
[Spring Boot] 33. JWT 인증 갱신처리 (2) 이번에는 저번시간에 이어서 JWT를 통한 인증 갱신처리하는 로직을 마저 구현하겠습니다. 지난번에 알아본 전체 동작 로직을 다시 생각해 보면, 아래와 같습니다. 사용자는 Google Signin Button을 통해서 Google OAuth로 인증을 수행하고, 연결되어 있는 API로 verify를 진행하게 됩니다. 이 부분은 지난번에 구현한 부분이기 때문에 생략하기로 하겠습니다. Back-End에서는 verification이 성공적으로 끝나면, JWT를 통한 Token을 생성하는데... 기존과 다르게 2가지 Token을 생성합니다. Access Token, Refresh Token이 그것입니다. Back-End에서는 이 중에서 Refresh Token을 사용자 e-mail 주소와 함께 DBMS에 저장합니다... 2021. 4. 24.