vue3에서 쿠키를 사용하는 방법

머리말

가장 일반적으로 쿠키를 사용하는 곳은 사용자의 계정과 비밀번호를 저장하는 곳일 것입니다. 이렇게 하면 사용자가 로그인할 때마다 다시 입력할 필요가 없습니다.

1 vue에 쿠키 설치

명령을 입력하세요. 쿠키 설치 후 main.js 파일에 다음 코드를 작성하세요npm install vue-cookies --save

import { createApp } from 'vue'
import VueCookies from 'vue-cookies'
 
const app = createApp(App)
 
app.config.globalProperties.$cookies = VueCookies

프로젝트 내에서 쿠키를 사용할 수 있습니다

2. 로그인 과정에서 쿠키 설정

사용자가 비밀번호를 변경할 수 있으므로 , 이것이 제가 사업에서 흔히 사용하는 방법입니다. 로그인 인터페이스가 올바른 데이터를 반환한 후(판단이 정확하면 로그인할 수 있음) 먼저 쿠키가 있는지 확인하고, 있으면 삭제한 다음 새 쿠키를 만드는 것입니다. . 코드는 다음과 같습니다

if (ret.code === 200) {
  // 删除之前的cookies
  if($cookies.isKey("xxxxx") ){
     $cookies.remove("xxxxx")
  }
}

그런 다음 로그인 정보를 쿠키에 다시 저장하면 코드는 다음과 같습니다

// 设置cookies保存的内容
const xxxxx = {
  username: '',
  password: '',
  // 以下还有很多信息
}

마지막 단계는 쿠키를 다시 저장하는 것입니다. 코드는 다음과 같습니다

// 设置cookies的日期为一个月
$cookies.config("1m")
// 设置cookies
$cookies.set("xxxxx",xxxxx); // 前面的为设置cookies的名字，后面为内容

문득 생각이 들었습니다. 인터뷰에서 자주 언급되는 질문, 쿠키를 무효화하는 방법에 대한 답변은 쿠키의 만료 시간을 이전 시간으로 설정하는 것입니다. 생각해보셨는지 모르겠습니다.

3. 필요한 곳에서 이전에 저장된 쿠키를 가져옵니다

코드도 매우 간단합니다

import { getCurrentInstance } from 'vue'
 
// 创建可以访问内部组件实例的实例
const internalInstance = getCurrentInstance()
const internalData = internalInstance.appContext.config.globalProperties
const xxxxx = internalData.$cookies.get('xxxxx') // 后面的为之前设置的cookies的名字

이렇게 하면 필요한 곳에서 쿠키의 내용을 가져올 수 있습니다.

위 내용은 vue3에서 쿠키를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!