vue中cookies的使用方式
vue中cookies的使用
有時(shí)候做登錄時(shí)會(huì)有一個(gè)記住密碼的需求,這個(gè)時(shí)候可以使用cookies把賬號(hào)密碼存起來,下次再進(jìn)來就免去了輸入賬號(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)頁面就先獲取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í)沒有勾選記住密碼,就把cookies里面的參數(shù)移除 Cookies.remove("username"); Cookies.remove("password"); Cookies.remove("isRemember"); } //把登錄名和用戶名存好后,開始發(fā)接口請(qǐng)求數(shù)據(jù),此處省略.... },
cookies的使用方式:儲(chǔ)存、獲取、刪除三種
- 存:
Cookies.set('userName', '嘻嘻嘻', { expires: 3 });
- 取:
JSON.parse(Cookies.get('userName'))
- 刪:
Cookies.remove('userName')
總結(jié)
大功告成,完結(jié)~
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由的方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問題的方式
今天在開發(fā)中遇到有點(diǎn)小問題,vue+Java后端進(jìn)行調(diào)試時(shí)如何解決跨域問題,下面小編給大家分享解決方法,感興趣的朋友一起看看吧2017-10-10vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue 自動(dòng)化路由實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 自動(dòng)化路由實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09vue-simple-uploader上傳成功之后的response獲取代碼
這篇文章主要介紹了vue-simple-uploader上傳成功之后的response獲取代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧~2020-09-09vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造
這篇文章主要介紹了vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造,home.vue 組件有了兩個(gè)屬性:navs 和 tts 屬性,具體實(shí)例代碼大家跟隨小編一起通過本文學(xué)習(xí)吧2018-09-09