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