vue3中cookie的詳細使用過程

更新時間：2022年08月12日 16:39:35 作者：xjc233

近期做的項目比較雜,涉及到前端框架的工作,遇到了許多問題,記錄一下這個比較棘手的問題,下面這篇文章主要給大家介紹了關于vue3中cookie的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

cookie使用最多的地方想必是保存用戶的賬號與密碼，可以避免用戶每次登錄時都要重新輸入

1.vue中cookie的安裝

在終端中輸入命令npm install vue-cookies --save，即可安裝cookies，安裝之后在main.js文件中寫下以下代碼

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

即可在項目中使用cookies

2.登錄過程中cookies的設置

因為用戶可能會修改密碼，所以我在業(yè)務中常用的做法是當登錄的接口返回正確的數據后（判斷正確，可以登錄）先判斷有沒有cookies，有就將其刪除，再創(chuàng)建新的cookies，代碼如下

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

之后將登錄的信息重新存入cookie中，代碼如下

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

最后便是重新存cookies，代碼如下

// 設置cookies的日期為一個月
$cookies.config("1m")
// 設置cookies
$cookies.set("xxxxx",xxxxx); // 前面的為設置cookies的名字，后面為內容

這里突然想到了面試中經常提到的一個問題，怎么將cookies設置為無效，答案是將cookies的過期時間設置為之前的時間，不知道大家有沒有想到呢。

3.在需要的地方拿到之前存入的cookies

代碼也非常簡單啦

import { getCurrentInstance } from 'vue'
 
// 創(chuàng)建可以訪問內部組件實例的實例
const internalInstance = getCurrentInstance()
const internalData = internalInstance.appContext.config.globalProperties
const xxxxx = internalData.$cookies.get('xxxxx') // 后面的為之前設置的cookies的名字

這樣就可以在需要的地方拿到cookies中的內容了。

總結

到此這篇關于vue3中cookie使用的文章就介紹到這了,更多相關vue3 cookie使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
cookie

van-uploader保存文件到后端回顯后端接口返回的數據
前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關于van-uploader保存文件到后端回顯后端接口返回的數據,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
Vue中mixins混入的介紹和使用詳解
mixins（混入）是一種分發(fā)?Vue?組件中可復用功能的非常靈活的方式，這篇文章主要為大家介紹了mixins混入的介紹和使用，需要的可以參考下
2023-08-08
詳解vue-cli項目中怎么使用mock數據
這篇文章主要介紹了vue-cli項目中怎么使用mock數據，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
vue如何實現(xiàn)接口統(tǒng)一管理
這篇文章主要介紹了vue如何實現(xiàn)接口統(tǒng)一管理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
element-plus中如何實現(xiàn)按需導入與全局導入
本文主要介紹了element-plus中如何實現(xiàn)按需導入與全局導入，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關資料,在時間開發(fā)中上傳文件是經常遇到的一個需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-08-08
Vue3 去除 vue warn 及生產環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產環(huán)境去除console.log的方法，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-06-06
面試最常問的13種Vue修飾符
修飾符也是Vue的重要組成成分之一，利用好修飾符可以大大地提高開發(fā)的效率，接下來給大家介紹一下面試官最喜歡問的13種Vue修飾符，感興趣的可以了解一下
2021-07-07
淺談VUE監(jiān)聽窗口變化事件的問題
下面小編就為大家分享一篇淺談VUE監(jiān)聽窗口變化事件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue3使用icon的兩種方式實例
vue開發(fā)網站的時候,往往圖標是起著很重要的作用,下面這篇文章主要給大家介紹了關于Vue3使用icon的兩種方式,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2021-11-11