Comment utiliser les cookies dans vue3

Avant-propos

L'endroit le plus couramment utilisé pour les cookies est probablement pour enregistrer le compte et le mot de passe de l'utilisateur, ce qui peut éviter à l'utilisateur d'avoir à se ressaisir à chaque fois qu'il se connecte

1 Installation des cookies dans vue

Entrez la commande. dans le terminalnpm install vue-cookies --save pour l'installer Cookies, après l'installation, écrivez le code suivant dans le fichier main.js

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

Vous pouvez utiliser des cookies dans le projet

2. Paramètres des cookies pendant le processus de connexion

Parce que les utilisateurs peuvent changer leur mot de passe , c'est ce que j'utilise couramment dans mon entreprise. La méthode est qu'une fois que l'interface de connexion a renvoyé les données correctes (le jugement est correct, vous pouvez vous connecter), déterminez d'abord s'il y a des cookies, supprimez-les s'il y en a, puis créez de nouveaux cookies. . Le code est le suivant

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

Ensuite, re-stockez les informations de connexion dans le cookie, le code est le suivant

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

La dernière étape consiste à réenregistrer les cookies, le code est le suivant

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

J'ai soudain pensé. d'une question souvent évoquée dans les interviews, comment rendre les cookies invalides, la réponse est de régler le délai d'expiration des cookies sur le temps précédent, je ne sais pas si vous y avez pensé.

3. Obtenez les cookies précédemment stockés si nécessaire

Le code est également très simple

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

De cette façon, vous pouvez obtenir le contenu des cookies si nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!