Vue+element+cookie记住密码功能的简单实现方法

实现功能：

1、登录时勾选记住密码，用cookie保存账号和密码并对密码进行两次加密处理（纯前端），下次登录自动输入账号密码

2、登录时不勾选，清空cookie，下次登录需要输入

效果图：

=============================================================================================================================================================================================

Html

 
     
      

      
      

      

      
      

      

 
  
 
 
  
 

      
      
记住密码
      
      
登录
      
     
    

加密方法我用的base64和CryptoJS 大家记得去下载

js部分：

登录

// 登录
submitForm(formName) {
 this.$refs[formName].validate((valid) => {
  if (valid) {
   let username=this.ValidateForm.username;
   let pwd=this.ValidateForm.password;
   let sidentify=this.ValidateForm.sidentify;
   // 验证码通过
   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 : '登录成功！',
type : 'success'
      })
      //调用check选中方法
      this.checkedPwd(username,pwd)
      this.$router.push({name:'Home'})
     }else {
      this.$message({
message : '账号或密码错误，请重新输入！',
type : 'error'
      })
      //清空
      this.resetForm('ValidateForm')
      //刷新验证码
      this.$refs.switchSidentify.changeCode()
     }
    })
   }else {
    this.$message({
     message : '验证码输入错误，请重新输入！',
     type : 'error'
    })
    this.$refs.switchSidentify.changeCode()
    this.resetForm('ValidateForm')
   }
  } else {
   return false;
  }
 });
},

check方法：

checkedPwd(username,pwd){
 // 记住密码进行cookie存储和密码加密
 if (this.checked){
  // base64 加密
  let base64Pwd=base64.encode(pwd);
  // Encrypt 加密
  let cryptoJsPwd=CryptoJS.AES.encrypt(base64Pwd,key).toString()
  // 账号密码保存天数
  this.setcookie(username,cryptoJsPwd,7)
 }else{
  // 清空
  this.clearcookie()
 }
},

设置读取和清空cookie

// 设置cookie
setcookie(c_name, c_pwd, exdays) {
 var exdate = new Date(); // 获取时间
 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
 // 字符串拼接cookie
 window.document.cookie = "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
 window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
// 读取cookie
getcookie: function() {
 if (document.cookie.length > 0) {
  //checked为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 解密
    let bytes = CryptoJS.AES.decrypt(arr2[1],key)
    let originalText=bytes.toString(CryptoJS.enc.Utf8)
    // base64解密
    let pwd=base64.decode(originalText)
    this.ValidateForm.password = pwd;
   }
  }
 }
},
// 清除cookie
clearcookie: function() {
 this.setcookie("", "", -1); // 修改2值都为空，天数为负1天就好了
},

一定要创建后读取cookie

created () {
 this.getcookie()
},

总结

到此这篇关于Vue+element+cookie记住密码功能的简单实现方法文章就介绍到这了,更多相关Vue+element+cookie记住密码功能内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！