Vue實現登錄記住賬號密碼功能的思路與過程
實現思路
用戶登錄時若勾選“記住我”功能選項,則將登錄名和密碼(加密後)保存至本地緩存中,下次登錄頁面加載時自動獲取保存好的賬號和密碼(需解密),回顯到登錄輸入框中。
這裡有三種方法來存儲賬號密碼:
1. sessionStorage(不推薦)
1). 僅在當前會話下有效,關閉瀏覽器窗口後就被清除瞭
2). 存放數據大小一般為5MB
3). 不與服務器進行交互通信
2. localStorage
1). 除非主動清除localStorage裡的信息,否則將永遠存在,關閉瀏覽器窗口後下次啟動任然存在
2). 存放數據大小一般為5MB
3). 不與服務器進行交互通信
3. cookies
1). 可以手動設置過期時間,超過有效期則失效。未設置過期時間,關閉瀏覽器窗口後就被清除瞭
2). 存放數據大小一般為4K
3). 每次請求都會被傳送到服務器
這裡主要介紹第二種和第三種的使用方法。
功能界面
<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="loginForm demo-ruleForm"> <!-- 賬號 --> <el-form-item label="賬號" prop="userId" autocomplete="on"> <el-input v-model="loginForm.userId" placeholder="請輸入賬號"></el-input> </el-form-item> <!-- 密碼 --> <el-form-item label="密碼" prop="password"> <el-input type="password" v-model="loginForm.password" placeholder="請輸入密碼" @keyup.enter="submitForm('loginForm')"></el-input> </el-form-item> <div class="tip"> <!-- 記住我 --> <el-checkbox v-model="checked" class="rememberMe">記住我</el-checkbox> <!-- 找回密碼 --> <el-button type="text" @click="open()" class="forgetPw">忘記密碼?</el-button> </div> <!-- 登錄 --> <el-form-item> <el-button type="primary" @click="submitForm('loginForm')" class="submit-btn">登錄</el-button> </el-form-item> </el-form>
記住賬號密碼功能的具體實現
密碼加密
為提高安全性,密碼存儲前需進行加密處理。目前加密方式有很多種,我這裡選用瞭base64。
npm安裝base64依賴
//安裝 npm install --save js-base64 //引入 const Base64 = require("js-base64").Base64
localStorage
export default { data() { return { loginForm: { userId: "", password: "", }, checked: false, }; }, mounted() { let username = localStorage.getItem("userId"); if (username) { this.loginForm.userId = localStorage.getItem("userId"); this.loginForm.password = Base64.decode(localStorage.getItem("password"));// base64解密 this.checked = true; } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { /* ------ 賬號密碼的存儲 ------ */ if (this.checked) { let password = Base64.encode(this.loginForm.password); // base64加密 localStorage.setItem("userId", this.loginForm.userId); localStorage.setItem("password", password); } else { localStorage.removeItem("userId"); localStorage.removeItem("password"); } /* ------ http登錄請求 ------ */ } else { console.log("error submit!!"); return false; } }); }, }, };
cookies
export default { data() { return { loginForm: { userId: "", password: "", }, checked: false, }; }, mounted() { this.getCookie(); }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { /* ------ 賬號密碼的存儲 ------ */ if (this.checked) { let password = Base64.encode(this.loginForm.password); // base64加密 this.setCookie(this.loginForm.userId, password, 7); } else { this.setCookie("", "", -1); // 修改2值都為空,天數為負1天就好瞭 } /* ------ http登錄請求 ------ */ } else { console.log("error submit!!"); return false; } }); }, // 設置cookie setCookie(userId, password, days) { let date = new Date(); // 獲取時間 date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // 保存的天數 // 字符串拼接cookie window.document.cookie = "userId" + "=" + userId + ";path=/;expires=" + date.toGMTString(); window.document.cookie = "password" + "=" + password + ";path=/;expires=" + date.toGMTString(); }, // 讀取cookie 將用戶名和密碼回顯到input框中 getCookie() { if (document.cookie.length > 0) { let arr = document.cookie.split("; "); //分割成一個個獨立的“key=value”的形式 for (let i = 0; i < arr.length; i++) { let arr2 = arr[i].split("="); // 再次切割,arr2[0]為key值,arr2[1]為對應的value if (arr2[0] === "userId") { this.loginForm.userId = arr2[1]; } else if (arr2[0] === "password") { this.loginForm.password = Base64.decode(arr2[1]);// base64解密 this.checked = true; } } } }, }, };
總結
到此這篇關於Vue實現登錄記住賬號密碼功能的思路與過程的文章就介紹到這瞭,更多相關Vue實現登錄記住賬號密碼內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue實現記住賬號密碼功能的操作過程
- vue登錄頁實現使用cookie記住7天密碼功能的方法
- vue登錄頁面回車執行事件@keyup.enter.native問題
- element ui提交表單返回成功後自動清空表單的值的實現代碼
- VUE實現註冊與登錄效果