Implementation approach

If the Remember Me option is selected during login, the user saves the encrypted login name and password to the local cache. When the next login page is loaded, the user automatically obtains the saved account and password (decrypted) and displays the saved account and password in the login input box.

There are three ways to store account passwords:

1. SessionStorage (not recommended)

1). Valid only for the current session and cleared after closing the browser window 2). 3). Does not interact with the serverCopy the code

2. localStorage

1). Unless the information in localStorage is actively cleared, it will exist forever and will still exist after the next startup after closing the browser window. 3). Does not interact with the serverCopy the code

3. cookies

1). You can manually set the expiration time. No expiration time is set, it will be cleared after closing the browser window. Each request is sent to the serverCopy the code

Here mainly introduces the second and the third method of use.

The function interface

<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 = "please enter the account" > < / el - input > < / el - form - item > <! <el-form-item label=" password" prop="password"> <el-input type="password" V-model ="loginForm. Password" Placeholder =" @keyup.enter="submitForm('loginForm')"></el-input> </el-form-item> <div class="tip"> <! RememberMe --> <el-checkbox v-model="checked" class="rememberMe"> <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-form-item> </el-form>Copy the code

Remember the specific implementation of the account and password function

Password encryption

To improve security, the password must be encrypted before being stored. At present, there are many encryption methods, I choose base64.

NPM installs base64 dependencies

// NPM install --save js-base64 // introduce const base64 = require("js-base64").base64Copy the code

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 decrypt this.checked = true; } }, methods: {{submitForm (formName) enclosing $refs [formName]. Validate ((valid) = > {the if (valid) {/ * -- -- -- -- -- - account password stored -- -- -- -- -- - * / if (this.checked) { let password = Base64.encode(this.loginForm.password); SetItem ("userId", this.loginform. UserId); // Base64 encryption localstorage.setitem ("userId", this.loginform. UserId); localStorage.setItem("password", password); } else { localStorage.removeItem("userId"); localStorage.removeItem("password"); } / HTTP login request * -- -- -- -- -- - -- -- -- -- -- - * /} else {the console. The log (" error "submit!!!!!" ); return false; }}); ,}}};Copy the code

cookies

export default { data() { return { loginForm: { userId: "", password: "", }, checked: false, }; }, mounted() { this.getCookie(); }, methods: {{submitForm (formName) enclosing $refs [formName]. Validate ((valid) = > {the if (valid) {/ * -- -- -- -- -- - account password stored -- -- -- -- -- - * / if (this.checked) { let password = Base64.encode(this.loginForm.password); // base64 encrypts this.setcookie (this.loginform. UserId, password, 7); } else { this.setCookie("", "", -1); Days / / modify 2 value is empty, negative 1 good day} / HTTP login request * -- -- -- -- -- - -- -- -- -- -- - * /} else {the console. The log (" error "submit!!!!!" ); return false; }}); }, // setCookie setCookie(userId, password, days) {let date = new 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(); GetCookie () {if (document.cookie.length > 0) {let arr = document.cookie.split("; "); // Split into separate "key=value" for (let I = 0; i < arr.length; i++) { let arr2 = arr[i].split("="); If (arr2[0] === "userId") {this.logInform. UserId = arr2[1]; if (arr2[0] === "userId") {this.loginform. } else if (arr2[0] === "password") { this.loginForm.password = Base64.decode(arr2[1]); // base64 decrypt this.checked = true; }}}},},};Copy the code