[ Vue.js, Node ] 로그인

     로그인 🔰     

 

올바른 아이디와 비밀번호를 입력하였을 시, 제대로 로그인이 되는 기능을 만들어보자.

화면은 아래와 같다. 간단히 인풋 2개 버튼 하나로 이루어져있다.

로그인 화면

 

로그인 화면 vue

data에 adminId와 adminPw를 만들어두고, 인풋과 v-model로 바인딩을 시켜준 뒤에 로그인 버튼을 누르면

adminId와 adminPw가 vuex에서 actions에 설정해놓은 login 함수가 실행이 될 것이다 !

 

...mapActions는 여러 모듈로 나뉘어 져 있는 vuex에 있는 함수들을 쉽게 사용할 수 있도록 해주는 역할을 한다.
이 외에도 mapState, mapGetters, mapMutaion이 있다.

 

vuex auth login

Api와 그에 물려있는 기능들은 아래의 접은 글을 확인해보자!

 

authApi, myAxios, interceptors, instance

login에서 사용하는 authApi는 아래와 같다. axios를 사용하여 backend로 요청을 보내는 역할을한다.

한 곳에 다 적을 수도 있지만, 코드가 지저분해질 뿐더러 한꺼번에 api들을 관리하게 되면 효율적이기에 api 모듈을 따로 만들어두었다. 여기서도 myAxios라는 api를 사용하고 있는데 내용은 다음과 같다.

 

여기선 get이외의 요청은 post로만 보낼 것이기에 일단 method는 post와 get으로 고정시켜두었다. url과 method, data를 받은 뒤에 ( 혹은 config가 있다면 config도 ) instance라는 것에 담아서 요청을 보낸다.

 

계속 꼬리에 꼬리를 물고 내려가네요 ㅠㅠ  조금만 참아주세요!

 

여기서 instance란 axios를 사용할 때 있어서 간편히 사용할 수 있도록 해주는 것이다. 아래와 같이 작성해주면 내가 env.VUE_APP_API로 작성해 둔 주소가 기본베이스 URL로 설정이 된다. 따라서 주소를 받아올 때 다 받아오는 것이 아닌 baseUrl 의 뒷 부분만 받아오면 된다.

또한 intercepter라는 기능도 사용할 수 있게 된다. interceptor은 req를 보낼 때와 res를 받기 전에 가로채서 특정 기능을 수행하는 것이다. 

간단히 설명하자면, 요청을 보낼 때 cookie에 담긴token을 받아와 넣은 뒤 요청을 보낸다. ( store.commit()이 부분은 로딩상태일 때 화면에 빙글빙글 돌아가는 걸 보여주는 기능이다. )

응답을 받을 때에는 토큰이 만기 되었는지 확인하는 작업을 거친다. 

 

이렇듯 interceptor를 사용하면 일일이 api를 요청 보내고 받을 때마다 설정해줘야 하는 값들을 한번에 알아서 처리해주기에 너무 편리하다. 

받아온 값에 state의 값에 따라서 아이디가 일치하지 않는지, 비밀번호가 일치하지 않는지를 구별할 수 있다. 이를 통해 분기를 작성해주었다.

 

받아온 토큰 값과, 아이디정보들을 vuex에 저장해둔 뒤 메인페이지로 이동시켜버린다.