Springboot와 Vue 로그인 기능 구현하기
springboot에서 배운 JWT로그인 방식을 Vue에서도 사용하고싶다. 우선 Vue에서 할 일은
- 로그인 페이지 에서 /authenticate 시 token과 사용자의 정보를 저장하고
- 이후 api를 요청할때 token을 담아 보내 인증된 사용자라고 증명하는 것
위의 토큰과 사용자의 정보를 저장하기 위해 상태관리 라이브러리인 Vuex를 사용했다.
Vuex란?
- Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
- 무수히 많은 컴포넌트의 데이터를 관리하기 위한 라이브러리
- 애플리케이션의 모든 컴포넌트들에 대한 중앙 집중식 저장소의 역할 및 관리를 담당
- 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 사용하기 적합하다
npm으로 Vuex 설치
npm install vuex --save
Vuex의 구조 (속성)
Mutations Action State Getters
아래 블로그를 참고하여 공부하자
Mutations
- mutations도 getters와 동일하게 state의 값을 변환 시킬 때 사용한다.
- mutations는 동기적 로직을 정의한다는 특징을 가지고 있다.
- mutations와 getters의 차이점
- mutations는 전달인자를 받을 수 있다.
- getters는 computed에 등록 했지만 mutations는 methods에 등록한다.
Action
- mutations는 동기적 변이를 다룬다고 하였다.
actions는 그와 반대로, 비동기적 변이를 다루는 속성이다.
동기적(Synchronous)
어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식
비동기적(Asynchronous)
어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식
State
- State는 상태의 집합
- Vuex 는 단일 상태 트리(single state tree) 를 사용하기 때문에 이 집합 내에서 현재 상태를 쉽게 찾을 수 있다
단일 상태 트리(single state tree)
- 단일 상태 트리란, 쉽게 말해서 하나의 어플리케이션은 하나의 store만 가진다는 것을 의미한다.
Getters
- vue의 computed와 동일속성인데 다만 store에 있는 것
- 여러 컴포넌트에서 동일한 computed가 사용될 경우 Getters에 정의 후 사용
'Vue > Vue' 카테고리의 다른 글
(Login-1) JWT 로그인 방식 (0) | 2021.12.08 |
---|---|
10. 새로고침시 Vuex 상태 유지 (vuex-persistedstate) (0) | 2021.12.08 |
8. 상세페이지 출력 (springboot + vue 6) (0) | 2021.12.01 |
7. 게시판 출력 (Vue + Springboot 연동 5) (0) | 2021.11.26 |
6. get방식 통신2 (Vue + Springboot 연동 4) (0) | 2021.11.23 |