vue中cookies的使用方式
vue中cookies的使用
有時(shí)候做登錄時(shí)會(huì)有一個(gè)記住密碼的需求,這個(gè)時(shí)候可以使用cookies把賬號(hào)密碼存起來(lái),下次再進(jìn)來(lái)就免去了輸入賬號(hào)密碼的需求,
- 如圖:

原生cookies操作比較麻煩
這里我們使用js-cookies,先下載:
npm install --save js-cookie
安裝成功后在需要的地方進(jìn)行調(diào)用:
import Cookies from "js-cookie";
先看看在data中定義的表單數(shù)據(jù):
data() {
return {
//登錄表單
loginForm: {
username: "", //用戶名
password: "", //密碼
captcha: "", //驗(yàn)證碼的值
isRemember: false, //是否記住密碼
},
}
},寫在methods中的函數(shù):
created() {
//一進(jìn)頁(yè)面就先獲取cookies里面的參數(shù)
this.getCookie()
},
methods: {
// 獲取cookie參數(shù)
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const isRemember = Cookies.get("isRemember");
this.loginForm.username =
username == undefined ? this.loginForm.username : username;
this.loginForm.password =
password == undefined ? this.loginForm.password : decrypt(password);
this.loginForm.isRemember =
isRemember == undefined ? false : Boolean(isRemember);
Cookies.remove('data');
},
},
onLogin() {
//點(diǎn)擊登錄函數(shù)時(shí),如果勾選記住密碼
if (this.loginForm.isRemember) {
// 把賬號(hào)密碼等參數(shù)存到cookies,設(shè)置時(shí)間為30天
Cookies.set("username", this.loginForm.username, {
expires: 30,
});
Cookies.set("password", this.loginForm.password, {
expires: 30,
});
Cookies.set("isRemember", this.loginForm.isRemember, {
expires: 30,
});
} else {
//如果此時(shí)沒(méi)有勾選記住密碼,就把cookies里面的參數(shù)移除
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("isRemember");
}
//把登錄名和用戶名存好后,開(kāi)始發(fā)接口請(qǐng)求數(shù)據(jù),此處省略....
},cookies的使用方式:儲(chǔ)存、獲取、刪除三種
- 存:
Cookies.set('userName', '嘻嘻嘻', { expires: 3 });- ?。?/strong>
JSON.parse(Cookies.get('userName'))- 刪:
Cookies.remove('userName')總結(jié)
大功告成,完結(jié)~
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目接口訪問(wèn)地址設(shè)置方式
這篇文章主要介紹了vue項(xiàng)目接口訪問(wèn)地址設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3?使用provide?inject父子組件傳值失敗且子組件不響應(yīng)
這篇文章主要介紹了vue3使用provide?inject父子組件傳值傳不過(guò)去且傳遞后子組件不具備響應(yīng)性問(wèn)題解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
前端vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于前端vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化的相關(guān)資料,在Vue中你可以使用watch或者computed來(lái)監(jiān)聽(tīng)對(duì)象或數(shù)組某個(gè)屬性的變化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue watch監(jiān)聽(tīng)對(duì)象及對(duì)應(yīng)值的變化詳解
下面小編就為大家分享一篇vue watch監(jiān)聽(tīng)對(duì)象及對(duì)應(yīng)值的變化詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue_drf實(shí)現(xiàn)短信驗(yàn)證碼
我們?cè)谧鼍W(wǎng)站開(kāi)發(fā)時(shí),登錄頁(yè)面很多情況下是可以用手機(jī)號(hào)接收短信驗(yàn)證碼,本文主要介紹了vue_drf實(shí)現(xiàn)短信驗(yàn)證碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07
關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題
今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue利用computed配合watch實(shí)現(xiàn)監(jiān)聽(tīng)多個(gè)屬性的變化
這篇文章主要給大家介紹了在Vue中巧用computed配合watch實(shí)現(xiàn)監(jiān)聽(tīng)多個(gè)屬性的變化的方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
vue 全局封裝loading加載教程(全局監(jiān)聽(tīng))
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽(tīng)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見(jiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式,幫助大家更好的理解和學(xué)習(xí)vue路由,感興趣的朋友可以了解下2020-10-10

