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


Posted in Javascript onSeptember 20, 2020

实现功能:

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

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

效果图:

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

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

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: '用户名不能为空'}
      ]">
       <span><i class="el-icon-user"></i></span><el-input type="username" v-model.number="ValidateForm.username" autocomplete="off" clearable placeholder="用户名"></el-input>
      </el-form-item>
      <br>
      <el-form-item

        prop="password"
        :rules="[{ required: true, message: '密码不能为空'},
      ]">
       <span><i class="el-icon-lock"></i></span><el-input type="password" v-model.number="ValidateForm.password" autocomplete="off" clearable show-password placeholder="密码"></el-input>
      </el-form-item>
      <br>
      <el-form-item

        prop="sidentify"
        :rules="[
{ required: true, message: '验证码不能为空'},]"
      >
       <el-row class="sidentify">
        <el-col :span="21">
         <el-input type="age" v-model="ValidateForm.sidentify" autocomplete="off" placeholder="验证码"></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">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item>
       <el-button type="primary" @click="submitForm('ValidateForm')" class="login-btn">登录</el-button>
      </el-form-item>
     </el-form>
    </div>

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

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

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记住密码功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
js函数调用的方式
May 06 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
Vue.js用法详解
Nov 13 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 #Javascript
vue-cli3 热更新配置操作
Sep 18 #Javascript
vue-cli 关闭热更新操作
Sep 18 #Javascript
Node.JS如何实现JWT原理
Sep 18 #Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 #Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 #Javascript
js实现手表表盘时钟与圆周运动
Sep 18 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
jQuery使用手册之 事件处理
2007/03/24 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Python如何定义有默认参数的函数
2020/08/10 Python
如何将字串String转换成整数int
2015/02/21 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
大学生专科毕业生自我评价
2013/11/17 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
大专生自荐书范文
2014/06/22 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
毕业生党员个人总结
2015/02/14 职场文书
学校中秋节活动总结
2015/03/23 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android