Rumah > hujung hadapan web > View.js > Cara menggunakan kuki dalam vue3

Cara menggunakan kuki dalam vue3

PHPz
Lepaskan: 2023-05-12 14:19:27
ke hadapan
3490 orang telah melayarinya

Kata Pendahuluan

Tempat yang paling biasa digunakan untuk kuki mungkin untuk menyimpan akaun dan kata laluan pengguna, yang boleh mengelakkan pengguna perlu memasukkan semula setiap kali dia log masuk

1. Pemasangan kuki dalam vue

Masukkan arahan npm install vue-cookies --save dalam terminal untuk memasang kuki Selepas pemasangan, tulis kod berikut dalam fail main.js

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

untuk menggunakan kuki dalam projek.

2. Menetapkan kuki semasa proses log masuk

Oleh kerana pengguna boleh menukar kata laluan mereka, pendekatan biasa saya dalam perniagaan adalah dengan terlebih dahulu menentukan sama ada antara muka log masuk mengembalikan data yang betul (ia betul dan anda boleh log masuk). Jika terdapat kuki, padamkannya dan buat kuki baharu Kodnya adalah seperti berikut

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

dan kemudian simpan semula maklumat log masuk dalam kuki tersebut adalah seperti berikut

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

Akhir sekali, simpan semula kuki tersebut cookies ke masa sebelumnya Saya tertanya-tanya jika anda telah memikirkannya.

3. Dapatkan kuki yang disimpan sebelum ini di tempat yang diperlukan

Kodnya juga sangat mudah

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

Dengan cara ini, anda boleh mendapatkan kandungan kuki di tempat yang diperlukan .

Atas ialah kandungan terperinci Cara menggunakan kuki dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:yisu.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan