Spring Boot + Vue.js + JWT

[Back-end]

IDE : Spring Tool Suite (sts)

spring boot

[Front-end]
IDE : Visual Studio code
Framework : Vue.js
컴포넌트 라이브러리 : Vuetify

[DataBase]
MySQL

 

---

기능 소개

A. 로그인

로그인 화면

로그인 안했을 경우 사이드 바 

로그인했을 경우 사이드바

 

화면 설명:

평범한 로그인 화면입니다.

 

사용자를 

일반 사용자, 소셜 로그인 사용자

로 나누었으며,

 

일반 사용자는 username, password를 통해 JWT 발급 -> 인증 및 인가를,

소셜 로그인 사용자는 카카오, 네이버 api를 이용하여 accessToken 발급받아 로그인 처리를 진행합니다.

 

 

 

회원가입 버튼 클릭 시 회원가입 화면으로 이동합니다.

---

B. 회원가입

회원가입 화면

화면 설명 :

회원가입 시 사용자의 아이디, 비밀번호,  이메일 정보를 입력받습니다.해당 내용은 DB에 저장됩니다. (비밀번호는 PasswordEncoder 사용)

 

 

 

 

 

C. 프로필

프로필 화면

로그인 후 제일 먼저 보여지는 페이지입니다.

해당 사용자의 정보와 Token을 확인할 수 있습니다.

 

---

D. 게시판

게시판 목록

화면설명 : 

게시물을 작성 및 조회할 수 있는 게시판입니다.

기본적인 CRUD(게시물 작성, 게시물 조회, 게시물 수정, 게시물 삭제) 기능을 구현하고자 만들었습니다.

 

게시물 상세

게시물 생성(글쓰기)

 

E. 코로나 19 예방접종센터 조회

예방접종센터 목록

공공데이터포털 api를 사용하여 

전국의 코로나19 예방접종센터 목록을 불러왔습니다. (restTemplate 사용)

Response

얻은 데이터를 이용하여 해당 접종센터의 주소, 위도, 경도값을 구할 수 있었습니다.

 

위도, 경도값을 토대로 지도 api를 사용하여 해당 위치를 지도로 출력해주었습니다.

 

 

현재 프로젝트에 적용된 인증 및 인가 흐름

회원은 역할(role)이 나뉨

• 기본 role은 총 3개이며 소셜 로그인 사용자에 대한 role은 카카오, 네이버로 총 2개임.

<기본 Role>

ROLE_USER              - 일반 사용자

ROLE_MODERATOR    -

ROLE_ADMIN            - 관리자

 

<소셜 로그인 Role>

ROLE_KAKAO            - 카카오 로그인

ROLE_NAVER            - 네이버 로그인

• 소셜 로그인 role은 DB에 따로 저장되어 있지 않으며 소셜 로그인 사용자와
• 일반 로그인 사용자를 구분짓기 위해 프론트엔드에서 사용함.

ex)
현재 role이 ROLE_KAKAO 라면 -> 카카오 로그인
	ROLE_NAVER 라면 -> 네이버 로그인

그 외 -> 일반 로그인

• 회원가입에서 role 선택 가능 (USER, MODERATOR, ADMIN)

<인증 및 인가 과정>

[회원가입]

1. 사용자가 회원가입 폼에 맞게 작성 후 중복체크 버튼 클릭 (중복확인 : 이메일, 아이디)
2. DB에서 중복되는 정보가 있는지 확인
3. 회원가입 요청 -> post { username, email. role, password }
4. DB에 저장 (패스워드는 암호화)
5. 생성 완료 메시지

[로그인]

1. 아이디와 비밀번호 입력
2. 로그인 요청 -> post { username, password } 암호화된 패스워드 → DB와 비교
3. 인증 및 JWT 생성
4. 사용자, token 정보 return
5. 로그인 성공 메시지

[리소스 접근]

특정 리소스 접근 시 인가된 사용자만 접근이 가능하다.

1. 액세스 요청 ex) 게시판 조회 > 토큰 정보를 header에 담아 요청
2. JWT 토큰이 유효하면 인가 해줌
3. 접근 성공
4. accessToken 시간이 만료되면?        -> 토큰 재발급 요청을 보냄.
   1. (만료시간 설정은 application.properties -> jwtExpirationMs 에 정의해놓음. + axios 인터셉터 기능으로 Vue app이 만료 여부를 확인함) 

1. refreshToken 검증 (DB에 저장되어 있는 값과 비교함)
2. 검증이 성공하면 새로운 accessToken을 발급해줌.

라우터 가드

router.js에 설정한 라우터 가드

publicPages

로그인 화면, 회원가입 화면, home 화면은 누구나 들어갈 수 있도록 설정

 

authRequired

publicPage가 아닌 다른 곳으로, 인증 및 인가가 필수인 구역

 

LoggedIn

현재 로그인 상태를 확인하기 위한 변수 -> user(사용자) 정보를 localStorage에 저장했음.

 

if (authRequired && !loggedIn) { next('/login'); } else { next(); }

publicPage가 아닌, 로그인 상태가 아닐 시 로그인 페이지로 이동합니다.

 

전역 가드 참고 : https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/*   

to : 이동할 url 정보가 담긴 라우터 객체

from : 현재 url 정보가 담긴 라우터 객체

next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수.