Vue3 프로젝트 개요

앞선 Spring Boot Jwt with JPA and Redis 예제에서는 서버만 구현하였고 Postman을 이용하여 테스트를 진행하였다. 이번에는 Vue3로 화면 구현 후 테스트를 진행 하였 습니다.

 

이번 Vue3 프로젝트에서 다룰 내용은 아래와 같습니다.

• 주요 화면 로그인, 사용자 등록, 프로필 
• 사용자 권한에 따른 페이지 이동 처리
• Local Storage를 이용한 토큰 관리
• Axios Interceptor 를 이용한 AccessToken 갱신 처리

 

주요 화면

로그인 화면

 

프로필 화면

 

사용잗등록 화면

 

관리자 화면

 

사용자 화면

 

403 오류화면

403의 경우는 사용자 별로 권한을 가지고 있는데 관리자 권한이 없는 일반 사용자가 관리자 화면에 접근하는 경우 위의 페이지로 이동하게 된다.

 

404 오류화면

Vue 3 관련 사이트

https://www.youtube.com/watch?v=YrxBCBibVo0&list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1