[Vue.js] Cookie를 사용한 ID 저장 기능

Cookie 활용하여 웹사이트 로그인 시 ID 저장 기능 구현하기 

 

Cookie는 웹 브라우저에서 인증 및 세션 관리, 개인화 콘텐츠, 광고 타겟팅, 장바구니 등 편리성을 위해 다양하게 활용되고 있다. 이런 Cookie를 사용하여 사용자의 ID를 저장하는 기능을 만들 수 있다.

 

쿠키 생성 (삭제)

// 쿠키 생성 (삭제) 함수
function setCookie(name, value, days, saveCheck) {
    var expires = "";
    
    if(saveCheck) { // ID 저장 check 여부
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    } else {
   		document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
    }
    
    
}

// 로그인 성공 시 호출
function login() {
    ~~~
    ~~~
    if(loginSucces) {
    	setCookie("userId", this.id, 365, this.saveCheck); 
    } 
}

쿠키를 제거하기 위한 명령어는 따로 없기 때문에 쿠키를 제거하려면 쿠키 만료일을 현재 시간 이전으로 설정해 제거할 수 있다.
또한 Path를 추가함으로 써 쿠키가 적용되는 범위를 명시적으로 지정하여 보안 및 일관성을 유지할 수 있다.

 

 

쿠키 조회

// 쿠키 조회 함수
function getCookie(name) {
    var nameEQ = name + "=";
    var cookies = document.cookie.split(';');
    for(var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        while (cookie.charAt(0) == ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) == 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }
    return null;
}

// 로그인 화면을 다시 로드할 때 호출
function checkSavedId() {
    var savedId = getCookie("userId");
    if (savedId) {
        // 저장된 id가 있다면 해당 id를 가져와서 사용
        document.getElementById("idInput").value = savedId;
    }
}

 

 

---

VueCookies 

Vue에서 제공하는 VueCookies를 사용하면 더 쉽고 편리하게 구현할 수 있다. 

 

1. vue-cookies 다운로드

npm install vue-cookies

 

2. 쿠키 사용

import VueCookies from "vue-cookies";
// Cookie 사용 선언
Vue.use(VueCookies);

// Cookie 생성
this.$cookies.set("키", "값", "만료일");

// Key 값으로 Cookie 조회
const cookie = this.$cookies.get(test); key 값 조회
console.log(cookie); // value 값 출력 

// Cookie 제거
this.$cookies.remove("키");

 

3. 기타 활용 방법

// Cookie Default 만료일 7일로 설정
Vue.$cookies.config("7d");

// 특정 Cookie 있는지 확인
this.$cookies.isKey("키");

// 모든 Cookie의 Key 가져오기
this.$cookies.keys().join("\n");

// 모든 Cookie 지우기
this.$cookies.keys().forEach(cookie => this.$cookies.remove(cookie));

 

시간 단위

1 : 1초
60 * 60 * 12 : 12시간
60 * 60 * 25 * 30 : 1달
1d : 1일
new Date(2019,03,13).toUTCString(): 특정 시간

 

 

 

 

 

reference. https://kyounghwan01.github.io/blog/Vue/vue/vue-cookies/, v3-docs.vuejs-korea.org/ecosystem/themes.html

 

- 끝 -