[Vue.js] vue3-cookies 쿠키 저장, 사용 및 삭제 하는 법

vue3-cookies를 이용해 편리하게

쿠키를 get, set, remove 하는 방법에 대해 알아보겠습니다.

(vue 3 버전, typescript 사용, vue3-cookies 1.0.6 버전 사용)

 

---

 

 

1. vue3-cookies 공식 문서

GitHub : https://github.com/KanHarI/vue3-cookies

GitHub - KanHarI/vue3-cookies: A simple Vue.js plugin for handling browser cookies

 

 

* download

npm install vue3-cookies --save

OR

yarn add vue3-cookies

 

- npm 또는 yarn으로 vue3-cookies를 다운로드합니다.

 

 

2. auth.ts 파일 (TypeScript)

import { useCookies } from "vue3-cookies";

const { cookies } = useCookies();
const TokenKey = "Test-Login-Token";
const userIdKey = "Test-User-Id";
const userPwdKey = "Test-User-Pwd";

// 로그인 토큰
export const getToken = () => {
  return cookies.get(TokenKey);
};

export const setToken = (token: string) => {
  cookies.set(TokenKey, token, "Session");
};

export const removeToken = () => {
  return cookies.remove(TokenKey);
};

// 로그인 ID
export const getUserId = () => {
  return cookies.get(userIdKey);
};

export const setUserId = (id: string) => {
  cookies.set(userIdKey, id, "30d");
};

export const removeUserId = () => {
  return cookies.remove(userIdKey);
};

// 로그인 PWD
export const getUserPwd = () => {
  return cookies.get(userPwdKey);
};

export const setUserPwd = (pwd: string) => {
  cookies.set(userPwdKey, pwd, "30d");
};

export const removeUserPwd = () => {
  return cookies.remove(userPwdKey);
};

 

 

- 먼저 로그인 토큰을 쿠키로 저장하고, 가져오고, 삭제하는 코드입니다.

- 토큰은 Session 형식으로 저장하여 설정하도록 했습니다.

export const getToken = () => {
  return cookies.get(TokenKey);
};

export const setToken = (token: string) => {
  cookies.set(TokenKey, token, "Session");
};

export const removeToken = () => {
  return cookies.remove(TokenKey);
};

 

 

반응형

 

 

- 다음은 로그인 ID를 쿠키에 저장, 사용, 삭제하는 코드입니다.

- 로그인 ID 저장 기한은 30일로 설정했습니다.

export const getUserId = () => {
  return cookies.get(userIdKey);
};

export const setUserId = (id: string) => {
  cookies.set(userIdKey, id, "30d");
};

export const removeUserId = () => {
  return cookies.remove(userIdKey);
};

 

 

- 마지막으로 로그인 패스워드를 쿠키에 저장, 사용, 삭제하는 코드입니다.

- 로그인 패스워드 저장 기한 또한 30일로 설정했습니다.

export const getUserPwd = () => {
  return cookies.get(userPwdKey);
};

export const setUserPwd = (pwd: string) => {
  cookies.set(userPwdKey, pwd, "30d");
};

export const removeUserPwd = () => {
  return cookies.remove(userPwdKey);
};

 

 

3. 활용 예제

https://nm-it-diary.tistory.com/111

[Vue.js] vue3 cryptoJS sha256 비밀번호 암호화, 정규식 조건 설정

 

 

 

 

이상으로 vue3 typescript 환경에서 쿠키 저장, 사용, 삭제하는 방법에 대해 알아보았습니다.

---