So verwenden Sie Cookies in vue3

Vorwort

Der am häufigsten verwendete Ort für Cookies ist wahrscheinlich das Speichern des Benutzerkontos und des Passworts, wodurch vermieden werden kann, dass der Benutzer jedes Mal, wenn er sich anmeldet, erneut eingeben muss

1 Installation von Cookies in vue

Geben Sie den Befehl ein im Terminalnpm install vue-cookies --save um es zu installieren Cookies, schreiben Sie nach der Installation den folgenden Code in die Datei main.js

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

Sie können Cookies im Projekt verwenden

2 Einstellungen von Cookies während des Anmeldevorgangs

Weil Benutzer ihre ändern können Passwörter, das ist es, was ich in meinem Unternehmen häufig verwende. Die Methode besteht darin, dass, nachdem die Anmeldeschnittstelle korrekte Daten zurückgegeben hat (die Beurteilung ist korrekt, Sie können sich anmelden), zunächst festgestellt wird, ob Cookies vorhanden sind, diese ggf. gelöscht werden und dann neue erstellt werden Cookies. Der Code lautet wie folgt

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

Dann speichern Sie die Anmeldeinformationen erneut im Cookie. Der Code lautet wie folgt:

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

Der letzte Schritt besteht darin, die Cookies erneut zu speichern. Der Code lautet wie folgt:

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

Ich dachte an eine in Interviews häufig gestellte Frage, wie man Cookies auf ungültig setzt. Die Antwort besteht darin, die Ablaufzeit von Cookies auf den vorherigen Wert zu setzen. Ich weiß nicht, ob Sie daran gedacht haben.

3. Holen Sie sich die zuvor gespeicherten Cookies bei Bedarf

Der Code ist auch sehr einfach

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

Auf diese Weise können Sie den Inhalt von Cookies bei Bedarf abrufen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Cookies in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!