<> Implementation function ：
1, Check remember password when logging in , use cookie Save the account and password and encrypt the password twice （ Pure front end ）, Automatically input account and password for next login
2, Do not check when logging in , empty cookie, The next login requires input
design sketch ：
=============================================================================================================================================================================================
<>Html
<div class="login-form-item"> <el-form :model="ValidateForm" ref="ValidateForm"
label-width="100px" class="demo-ruleForm"> <el-form-item prop="username" :rules
="[{ required: true, message: ' The user name cannot be empty '} ]"> <span><i class="el-icon-user"></i><
/span><el-input type="username" v-model.number="ValidateForm.username"
autocomplete="off" clearable placeholder=" user name "></el-input> </el-form-item> <br>
<el-form-item prop="password" :rules="[{ required: true, message: ' Password cannot be empty '}, ]">
<span><i class="el-icon-lock"></i></span><el-input type="password" v-model.
number="ValidateForm.password" autocomplete="off" clearable show-password
placeholder=" password "></el-input> </el-form-item> <br> <el-form-item prop="sidentify"
:rules="[ { required: true, message: ' Verification code cannot be empty '},]" > <el-row class="sidentify">
<el-col :span="21"> <el-input type="age" v-model="ValidateForm.sidentify"
autocomplete="off" placeholder=" Verification Code "></el-input> </el-col> <el-col :span="3"
class="sidentify sidentify-img"> <sidentify :changeCode.sync='identifyCode' ref=
"switchSidentify"></sidentify> </el-col> </el-row> </el-form-item> <el-form-item
> <el-checkbox v-model="checked" class="sidentify"> Remember the password </el-checkbox> </el-form-
item> <el-form-item> <el-button type="primary" @click=
"submitForm('ValidateForm')" class="login-btn"> Sign in </el-button> </el-form-item> </
el-form> </div>
I use the encryption method base64 and CryptoJS Remember to download it
<>js part ：
Sign in
// Sign in submitForm(formName) { this.$refs[formName].validate((valid) => { if (
valid) { let username=this.ValidateForm.username; let pwd=this.ValidateForm.
password; let sidentify=this.ValidateForm.sidentify; // Verification code passed if (sidentify ==
this.identifyCode){ this.request.post(this.api.login.logindo,{username:username,
pwd:pwd}).then((res)=>{ console.log(res); if (res.data.code == 200){ this.
$message({ message : ' Login successful !', type : 'success' }) // call check Selection method this.checkedPwd(
username,pwd) this.$router.push({name:'Home'}) }else { this.$message({ message :
' Wrong account or password , Please re-enter !', type : 'error' }) // empty this.resetForm('ValidateForm') // Refresh captcha
this.$refs.switchSidentify.changeCode() } }) }else { this.$message({ message :
' Verification code input error , Please re-enter !', type : 'error' }) this.$refs.switchSidentify.changeCode() this
.resetForm('ValidateForm') } } else { return false; } }); },
check method ：
checkedPwd(username,pwd){ // Remember the password cookie Storage and password encryption if (this.checked){ // base64
encryption let base64Pwd=Base64.encode(pwd); // Encrypt encryption let cryptoJsPwd=CryptoJS.AES.
encrypt(base64Pwd,key).toString() // Number of days to save account password this.setCookie(username,
cryptoJsPwd,7) }else{ // empty this.clearCookie() } },
Set read and clear cookie
// set up cookie setCookie(c_name, c_pwd, exdays) { var exdate = new Date(); // Acquisition time
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // Number of days to save //
String splicing cookie window.document.cookie = "username" + "=" + c_name +
";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "password" +
"=" + c_pwd + ";path=/;expires=" + exdate.toGMTString(); }, // read cookie
getCookie: function() { if (document.cookie.length > 0) { //checked by true this.
checked=true var arr = document.cookie.split('; '); for (var i = 0; i < arr.
length; i++) { var arr2 = arr[i].split('='); if (arr2[0] == 'username') { this.
ValidateForm.username = arr2[1]; } else if (arr2[0] == 'password') { // Decrypt
decrypt let bytes = CryptoJS.AES.decrypt(arr2[1],key) let originalText=bytes.toString
(CryptoJS.enc.Utf8) // base64 decrypt let pwd=Base64.decode(originalText) this.
ValidateForm.password = pwd; } } } }, // eliminate cookie clearCookie: function() { this
.setCookie("", "", -1); // modify 2 All values are empty , The number of days is negative 1 It'll be fine },
Be sure to read after creation cookie
created () { this.getCookie() },
Technology
Daily Recommendation