> 웹 프론트엔드 > 프런트엔드 Q&A > vue 설정에서 쿠키를 활성화합니다.

vue 설정에서 쿠키를 활성화합니다.

PHPz
풀어 주다: 2023-05-25 10:06:37
원래의
1850명이 탐색했습니다.

인터넷의 급속한 발전으로 프론트엔드 기술에 주목하는 사람들이 점점 더 많아지고 있습니다. 프런트 엔드 개발의 중요한 부분인 Vue 프레임워크는 점차 사람들의 관심의 초점이 되었습니다. 이 글에서는 Vue에서 쿠키를 설정하는 방법을 소개합니다.

쿠키는 사용자의 컴퓨터에 저장되는 작은 텍스트 파일로, 웹사이트에서 다양한 방문자를 추적하고 식별하는 데 사용할 수 있습니다. 사용자가 웹사이트를 방문하면 서버는 사용자에게 임의의 고유 식별자가 포함된 쿠키를 보냅니다. 나중에 사용자가 웹사이트의 각 페이지를 방문하면 브라우저는 신원을 확인하고 추적하기 위해 서버에 쿠키를 보냅니다. 사용자의 행동.

Vue에서 쿠키를 활성화하려면 일부 구성 항목을 설정해야 합니다. 아래에서 하나씩 소개하겠습니다.

  1. cookie-parser 설치

먼저 Vue 프로젝트의 루트 디렉터리에서 npm 또는 원사를 사용하여 cookie-parser를 설치해야 합니다.

npm install cookie-parser
# 或者
yarn add cookie-parser
로그인 후 복사
  1. cookie-parser 소개

다음으로 Vue에서 프로젝트를 진행하려면 main.js 파일에 cookie-parser를 도입하고 해당 구성 정보를 설정해야 합니다.

import cookieParser from 'cookie-parser'
Vue.use(cookieParser())

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')
로그인 후 복사
  1. Setcookies

cookie-parser를 구성한 후 Vue에서 쿠키를 사용할 수 있습니다. 다음은 쿠키 설정의 예입니다.

this.$cookies.set('name', 'vue')

// 设置cookie的时候,我们还可以设置一些选项来控制cookie过期时间等
this.$cookies.set('name', 'vue', {
  expires: 7 // 过期时间为7天
})
로그인 후 복사

여기에서는 this.$cookies.set() 메서드를 사용하여 "vue" 값을 가진 "name"이라는 쿠키를 설정합니다. 쿠키 값 설정 외에도 쿠키 만료 시간 등 세 번째 매개변수에 쿠키 관련 옵션을 설정할 수도 있습니다.

  1. 쿠키 가져오기

쿠키를 설정한 후 해당 값도 가져와야 합니다. 이는 다음 코드를 통해 달성할 수 있습니다:

this.$cookies.get('name')
로그인 후 복사
  1. 쿠키 삭제

마찬가지로 쿠키도 삭제해야 합니다. 이는 다음 코드를 통해 달성할 수 있습니다:

this.$cookies.remove('name')
로그인 후 복사
  1. 쿠키 끄기

많은 경우 사용자 행동을 추적하는 데 쿠키가 필요하지 않으므로 Vue에서 쿠키를 꺼야 합니다. 이는 Vue.config에서 해당 속성을 설정하여 달성할 수 있습니다:

Vue.config.productionTip = false
Vue.config.devtools = false
Vue.config.silent = true
Vue.config.cookie =  false
로그인 후 복사

위의 네 줄의 코드는 Vue의 프로덕션 프롬프트, 개발 도구, 콘솔 출력 및 쿠키를 각각 끕니다. 이런 방식으로 Vue에서 쿠키를 끌 수 있습니다.

요약

이 글에서는 cookie-parser 설치, cookie-parser 소개, 쿠키 설정 및 가져오기, 쿠키 삭제, 쿠키 닫기 등 Vue에서 쿠키를 설정하는 방법을 소개합니다. 실제 개발에서는 사용자에게 보다 정확한 서비스를 제공하기 위해 일반적으로 쿠키를 사용하여 사용자 행동을 추적해야 합니다. Vue의 쿠키 설정에 대한 더 나은 제안이나 더 실용적인 경험이 있다면 공유할 메시지를 남겨주세요!

위 내용은 vue 설정에서 쿠키를 활성화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿