hackjap commented 3 years ago

로그인 및 회원가입 기본 동작 구현

로그인, 회원가입 컴포넌트화

// loginjoin.vue

먼저 회원가입, 로그인 폼을 컴포넌트화 진행

회원가입 폼 컴포넌트

// api / index.js

// SignupForm.vue

input에서 v-model로 받은 userData 객체를 폼을 통해 비동기처리 방식으로 localhost:3000/signup 으로 넘겨준다.
localhost:3000/ 은 실습을 위해 만든 서버이고 추후 backend 쪽에서 로그인 api가 완성되면 연동할 예정이다.
실습을 위한 localhost:3000 서버의 실행 방법은 아래에서 설명하겠다.

// LoginupForm.vue

회원가입 폼과 비슷하지만 로그인 폼에서는 세션 유지를 위해 스토어를 통해 로그인 상태 관리를 한다.
commit 을 통해 mutation의 메소드를 호출하여 state 값을 변경해준다.

// getters.js

coumputed 와 비슷한 방식으로 넘겨받은 state의 username 값을 체크하여 로그인 상태를 확인한다.

// mutation.js

로그인에서 받은 정보( username, token 등 ) 을 state에 저장한다.
로그인 폼에서 commit을 받아 mutation의 메소드를 호출하여 state를 조작해준다.

예비서버(localhost:3000) 사용방법

vue-til-server

front-vue2 의 같은 레벨인 vue-til-server 디렉토리로 이동하여 "npm run dev" 명령어를 입력한다.

DB

임시로 임의로 만들어 논 몽고 DB에 연결해 놓았고 추후 사용예정인 mySql로 변경 할 예정이다.

API

api 또한 swagger를 통해 임시로 로그인 api를 사용했고 백엔드 쪽에서 api 가 완성되면 추후 변경할 예정이다.

결과화면

비로그인시 getters 의 isLogin이 false 상태인 것을 확인할 수 있다. ( username 값이 없기때문에 )

로그인 시 , state.auth 의 username 과 token 값이 저장되고 isLogin또한 true 값으로 바뀐다.
lsLogin 값을 이용하여 v-if로 내정보 아이콘 또한 변경해주었음

보충해야 할 부분

로그인 유무에 따른 네비게이션 가드
로그인 및 회원가입 유효성 검사
jwt 토큰을 통한 api 인증처리

💊 보충하거나 궁금한 점 있으시면 피드백 주시면 감사하겠습니다.!

kangkyoungmin commented 3 years ago

고생하셨습니다. 한 가지 궁금한 사항이 있는데 임시로 임의로 만들어 논 몽고 DB에 연결해 놓았고 추후 사용예정인 mySql로 변경 할 예정이다.라고 했는데 로그인 처리 시 db와 front가 직접적으로 연결해서 사용하실 계획일까요??

hackjap commented 3 years ago

아마 backend 서버와 db만 연결되어있고 front에서는 api 요청으로 데이터를 넘겨주거나 받아오면 될 것 같습니다. 여기서도 axios를 통해서 임의로 만들어논 swagger api에 접근하였고 추후 백엔드쪽에서 api가 완성되면 restAPI 형태로 axios를 통해 넘겨오거나 받아오면 될 것 같습니다

DaengDaengMarket / DaengDaengClient