vue-cookie 라이브러리를 사용하여 회원 토큰 사용하기

현재 Vue를 사용하여 간단한 회원, 상품 관련 서비스 쇼핑몰 사이트를 만들고 있다.

회원가입을 하고 로그인을 하면 토큰이 생성되도록 백엔드쪽에 API를 만들어 놓았다.

그 토큰을 쿠키로 사용하여 로그인 시 Sign Out 버튼과 My Basket 버튼이 보이고, 로그아웃 시 Sign Up 버튼과 Sign In 버튼이 생기도록 화면을 구현해보고자 한다.

목차 1. 라이브러리 설치 2. 쿠키 생성 - main.js 3. 쿠키 생성 - SignIn.vue 4. 쿠키 삭제

1. 라이브러리 설치

https://www.npmjs.com/package/vue-cookie

vue-cookie

위 사이트에 가면 vue-cookie 라이브러리를 사용하는 법이 아주 친절하게 나와 있다.

터미널 창에 다음과 같이 입력하여 vue-cookie 라이브러리를 설치한다. 참고로 vue-cookies 라이브러리도 있는데, 거의 비슷하다.

package.json 파일의 dependencies를 살펴 보면 vue-cookie가 설치된 것을 확인할 수 있다.

쿠키를 생성하고 삭제하는 방법은 위 사이트에 예시로 설명이 아주 잘 되어 있다.

 

 

음..ㅎ 지금은 대충 이런 상태.

F12를 눌러서 Application > Cookies에 가면 아직 아무런 데이터가 없다. 물론 token도 없기 때문에 화면에 버튼은 Sign Up, Sign In이 보인다.

 

2. 쿠키 생성 - main.js

쿠키를 생성하기에 앞서 main.js에서 vue-cookie를 import해 준다.

 

3. 쿠키 생성 - SignIn.vue

다음과 같이 SignIn.vue를 작성한다. 이메일과 비밀번호를 입력하고 버튼을 누르면 토큰이 생성됨과 동시에 홈 화면으로 전환되고 헤더 부분의 버튼들이 바뀌는 형식이다. 

axios를 통해 서버와 post방식으로 통신하여 이메일과 비밀번호 값을 서버에 보내면 해당 사용자의 토큰 데이터를 받아올 수 있다.

그러면 40번째 줄과 같이 토큰을 accesstoken이라는 키로 쿠키에 저장할 수 있다.

쨘! 로그인을 하면 쿠키에 accesstoken이라는 이름으로 토큰값이 들어간 것을 확인할 수 있다.

또한 보여지는 화면에도 회원가입, 로그인 버튼은 사라지고 로그아웃, 내 장바구니 버튼으로 전환되었다.

이와 같은 로직이 필요한 이유는 로그인을 해야만 내 장바구니에 들어갈 수 있도록 해야 하기 때문이다.

 

4. 쿠키 삭제

쿠키를 삭제하는 법도 간단하다.

쿠키를 삭제하는 기능은 로그인 창에서 이루어지는 게 아니라 헤더에 있는 로그아웃 버튼을 눌렀을 때 작동해야 하기 때문에 AppHeader.vue 파일에 코드를 작성하였다.

42번째 줄에 간단히 쿠키를 삭제하는 코드를 작성한다.

또한 v-if 구문을 사용하여 버튼이 변경되도록 하였다.

로그아웃 버튼을 누르면 다음과 같이 쿠키가 정상적으로 삭제되고 화면의 버튼들도 바뀌었음을 확인할 수 있다.

 

 

코드프레소 DevOps Roasting 코스 2기 진행 중입니다.