問題描述
項(xiàng)目的登錄頁中，會有要求記住7天密碼的功能，本篇文章記錄一下寫法，主要是使用cookie，注釋我寫的很詳細(xì)了，大家可以看一下我寫的注釋的步驟，還是比較詳細(xì)的。親測有效
html部分
代碼圖示
效果圖示
代碼粘貼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<el-form ref="form" :model="form" label-width="80px" label-position="top" @submit.native.prevent> <el-form-item label="用戶名/賬號"> <div class="userError"> <el-input size="mini" v-model.trim="form.userName" clearable ></el-input> </div> </el-form-item> <el-form-item label="密碼"> <div class="pwdError"> <el-input size="mini" v-model.trim="form.loginPwd" clearable show-password ></el-input> </div> </el-form-item> <el-checkbox label="記住賬號" v-model="isRemember"></el-checkbox> <el-button native-type="submit" size="mini" @click="loginPage" >登錄</el-button ></el-form> |
js部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
export default { name: "login", data() { return { form: { userName: '', loginPwd: '', }, isRemember: false, }; }, mounted() { // 第1步，在頁面加載的時(shí)候，首先去查看一下cookie中有沒有用戶名和密碼可以用 this.getCookie(); }, methods: { /* 第3步，當(dāng)用戶執(zhí)行登錄操作的時(shí)候，先看看用戶名密碼對不對 若不對，就提示登錄錯(cuò)誤 若對，就再看一下用戶有沒有勾選記住密碼 若沒勾選，就及時(shí)清空cookie，回到最初始狀態(tài) 若勾選了，就把用戶名和密碼存到cookie中并設(shè)置7天有效期，以供使用 （當(dāng)然也有可能是更新之前的cookie時(shí)間） */ async loginPage() { // 發(fā)請求看看用戶輸入的用戶名和密碼是否正確 const res = await this.$api.loginByUserName(this.form) if(res.isSuccess == false){ this.$message.error("登錄錯(cuò)誤") } else{ const self = this; // 第4步，若復(fù)選框被勾選了，就調(diào)用設(shè)置cookie方法，把當(dāng)前的用戶名和密碼和過期時(shí)間存到cookie中 if (self.isRemember === true) { // 傳入賬號名，密碼，和保存天數(shù)（過期時(shí)間）3個(gè)參數(shù) // 1/24/60 測試可用一分鐘測試，這樣看著會比較明顯 self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60); // self.setCookie(this.form.userName, this.form.loginPwd, 7); // 這樣就是7天過期時(shí)間 } // 若沒被勾選就及時(shí)清空Cookie，因?yàn)檫@個(gè)cookie有可能是上一次的未過期的cookie，所以要及時(shí)清除掉 else { self.clearCookie(); } // 當(dāng)然，無論用戶是否勾選了cookie，路由該跳轉(zhuǎn)還是要跳轉(zhuǎn)的 this.$router.push({ name: "project", }); } }, // 設(shè)置cookie setCookie(username, password, exdays) { var exdate = new Date(); // 獲取當(dāng)前登錄的時(shí)間 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 將當(dāng)前登錄的時(shí)間加上七天，就是cookie過期的時(shí)間，也就是保存的天數(shù) // 字符串拼接cookie,因?yàn)閏ookie存儲的形式是name=value的形式 window.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "userPwd" + "=" + password + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + exdate.toGMTString(); }, // 第2步，若cookie中有用戶名和密碼的話，就通過兩次切割取出來存到form表單中以供使用，若是沒有就沒有 getCookie: function () { if (document.cookie.length > 0) { var arr = document.cookie.split("; "); //因?yàn)槭菙?shù)組所以要切割。打印看一下就知道了 // console.log(arr,"切割"); for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split("="); // 再次切割 // console.log(arr2,"切割2"); // // 判斷查找相對應(yīng)的值 if (arr2[0] === "userName") { this.form.userName = arr2[1]; // 轉(zhuǎn)存一份保存用戶名和密碼 } else if (arr2[0] === "userPwd") { this.form.loginPwd = arr2[1];//可解密 } else if (arr2[0] === "isRemember") { this.isRemember = Boolean(arr2[1]); } } } }, // 清除cookie clearCookie: fu this.setCookie("", "", -1); // 清空并設(shè)置天數(shù)為負(fù)1天 }, },}; |
cookie存儲圖示
總結(jié)
其實(shí)也很簡單，就是設(shè)置一個(gè)過期時(shí)間，也就是cookie的失效的日期，當(dāng)然中間需要有一些格式的處理，數(shù)據(jù)的加工。
補(bǔ)充，cookie是存在瀏覽器中，瀏覽器安裝在電腦中，比如安裝在C盤，所以cookie是存在C盤中的某個(gè)文件夾下，那個(gè)文件夾不僅有cookie，還有l(wèi)ocalStorage和sessionStorage和別的，具體哪個(gè)文件夾大家可以自己動手找一找。其實(shí)所謂的本地存儲其實(shí)就是存在自己的電腦上。
到此這篇關(guān)于vue登錄頁實(shí)現(xiàn)使用cookie記住7天密碼功能的方法的文章就介紹到這了,更多相關(guān)vue登錄頁cookie記住密碼內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/6929475332240048135
