토큰의 갱신 및 권한의 체크는 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..