토큰의 갱신 및 권한의 체크는 Axios Interceptor를 이용하여서 처리한다. 토큰 갱신 로그인을 하게 되면 서버에서는 AccessToken과 RefreshToken을 발급하게 됩니다. 프로젝트에서는 테스트를 위해서 AccessToken의 만료 시간은 2분 RefrshToken의 만료 시간을 5분으로 설정하였습니다. 토큰 업데이트 프로세스 1. Reqeust Header AccessToken, 사용자 이름을 설정하여서 Back-end API를 호출한다. 2. Back-end의 JwtFilter에서는 AccessToken의 유효성 체크 후 Token이 만료된 경우 새로 발급된 AccessToken을 Response Header에 포함하여서 결과 메시지와 함께 전송한다. 3. Axios Interce..

로그인 처리는 사용자가 로그인 시 JWT를 이용하여서 토큰을 발급받은 후 Local Storage에 서버로부터 발급받은 AccessToken과 사용자 정보를 저장하게 된다. 저장된 정보는 로그인 후 페이지 접근 시 Request Header에 AccessToken을 전송하여서 사용자 인증을 처리하게 된다. 서버 쪽 프로세스는 아래 글을 참고하여주시기 바랍니다. https://jydlove.tistory.com/63?category=1031676 로그인 프로세스 사용자 로그인에 대한 로직을 살펴보도록 하겠습니다. 아래 시퀀스 다이어그램을 통해서 전체적인 로직을 확인 해보도록 하겠습니다. JwtFilter 로그인시 발급된 토큰 및 쿠키 정보가 없기 때문에 jydlove.tistory.com 변경된 서버 프로..

프로젝트를 시작하기에 앞서서 vue cli를 이용하여 프로젝트 설정을 하는 방법을 알아 보도로 하겠습니다. 프로젝트 설정 전에 node.js 는 설치가 되어 있어야 합니다. IDE 툴은 Viusal Studio를 사용합니다. 프로젝트 설정 1. cmd 실행 후 아래와 같이 명령어를 입력합니다. 2. 아래 그림과 같이 Manually select features를 선택합니다. 3. 아래 그림과 같이 (*) 표시된 메뉴를 선택합니다. 4. 아래와 같이 3.x 를 선택합니다. 5. 아래 그림과 같이 마지막에 Use history mode for router? 이 부분에 n을 입력합니다. 6. 아래 그림과 같이 In package.jso n 을 선택합니다. 7. 아래 그림과 같이 마지막 질문에 n 을 입력합니다..

앞선 Spring Boot Jwt with JPA and Redis 예제에서는 서버만 구현하였고 Postman을 이용하여 테스트를 진행하였다. 이번에는 Vue3로 화면 구현 후 테스트를 진행 하였 습니다. 이번 Vue3 프로젝트에서 다룰 내용은 아래와 같습니다. 주요 화면 로그인, 사용자 등록, 프로필 사용자 권한에 따른 페이지 이동 처리 Local Storage를 이용한 토큰 관리 Axios Interceptor 를 이용한 AccessToken 갱신 처리 주요 화면 403의 경우는 사용자 별로 권한을 가지고 있는데 관리자 권한이 없는 일반 사용자가 관리자 화면에 접근하는 경우 위의 페이지로 이동하게 된다. Vue 3 관련 사이트 https://www.youtube.com/watch?v=YrxBCBibV..

앞에서 작성한 로그인 코드에 대한 테스트 결과입니다. 테스트는 Postman을 이용하여 진행합니다. AccessToken 재발급 테스트와 마찬가지로 사용자가 사이트에서 활동 하고 있다는 가정하에 임의의 컨테츠 페이지를 호출 합니다. ※ Check Point 로그인 테스트에서 아래의 4가지 사항을 확인 해야합니다. 1. RefreshToken 재발급 확인 2. Redis 서버 재발급 Refresh Token 정보 생성 확인 01. 페이지호출 02. Redis 서버 재발급 Refresh Token 정보 생성 확인

RefreshToken의 역할은 AccessToken이 만료되었을 때 AccessToken 재발급 역할을 하게 된다. RefreshToken의 키 정보는 쿠키, h2db, Redis Server에 저장이 된다. 아래 그림은 RefreshToken 재발급 프로세스 이다. JwtFilter // RefreshToken 재발급인 경우 if (isValidAccessToken && !isValidRefreshToken) { // RefreshToken 재발급 refreshToken = reIssueRefreshToken(accessToken); // RefreshToken 쿠키 생성 CookieUtil refreshTokenCookieUtil = new CookieUtil(); httpServletRespons..