vue中使用cookies和crypto-js实现记住密码和加密的方法


Posted in Javascript onOctober 18, 2018

使用crypto-js加解密

第一步,安装

npm install crypto-js

第二步,在你需要的vue组件内import

import CryptoJS from "crypto-js";

第三步,使用

// Encrypt 加密 
  var cipherText = CryptoJS.AES.encrypt(
   "my message",
   "secretkey123"
  ).toString();
  console.log(cipherText)
  // Decrypt 解密
  var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123");
  var originalText = bytes.toString(CryptoJS.enc.Utf8);
  console.log(originalText); // 'my message'

注意这个mymessage是字符串,如果你要加密的用户id(number类型)得先转成字符串

更多使用请访问官方文档

记住密码

  • 实现原理是登录的时候,如果勾选了记住密码(把‘记住密码'状态保存到localstorage)就保存账号密码到cookies;
  • 之后进入登录页面的时候,判断是否记住了密码(从localstorage判断),如果记住密码则导出cookies到表单;

其中保存使用setcookie方法,取出则使用getcookie方法。

ok,我们来编写方法

//设置cookie
  setCookie(portId, psw, exdays) {
   // Encrypt,加密账号密码
   var cipherPortId = CryptoJS.AES.encrypt(
    portId+'',
    "secretkey123"
   ).toString();
   var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString();
   console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功

   var exdate = new Date(); //获取时间
   exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
   //字符串拼接cookie,为什么这里用了==,因为加密后的字符串也有个=号,影响下面getcookie的字符串切割,你也可以使用更炫酷的符号。
   window.document.cookie =
    "currentPortId" +
    "==" +
    cipherPortId +
    ";path=/;expires=" +
    exdate.toGMTString();
   window.document.cookie =
    "password" +
    "==" +
    cipherPsw +
    ";path=/;expires=" +
    exdate.toGMTString();
  },
  //读取cookie
  getCookie: function() {
   if (document.cookie.length > 0) {
    var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改
    for (var i = 0; i < arr.length; i++) {
     var arr2 = arr[i].split("=="); //根据==切割
     //判断查找相对应的值
     if (arr2[0] == "currentPortId") {
      // Decrypt,将解密后的内容赋值给账号
      var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
      this.currentPortId = bytes.toString(CryptoJS.enc.Utf8)-0;
     } else if (arr2[0] == "password") {
      // Decrypt,将解密后的内容赋值给密码
      var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
      this.password = bytes.toString(CryptoJS.enc.Utf8);
     }
    }
   }
  },
  //清除cookie
  clearCookie: function() {
   this.setCookie("", "", -1); 
  }

登录的方法如下:

login() {
   this.$http //请根据实际情况修改该方法
    .post(...)
    .then(res => {
     if (res.data.code == "success") {
      if (this.rememberPsw == true) {
        //判断用户是否勾选了记住密码选项rememberPsw,传入保存的账号currentPortId,密码password,天数30
       this.setCookie(this.currentPortId, this.password, 30);
      }else{
       this.clearCookie();
      }
      //这里是因为要在created中判断,所以使用了localstorage比较简单,当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。
      localStorage.setItem("rememberPsw", this.rememberPsw);
      
     } else {
      //----
     }
    })
    .catch(err => {
     //----
    });
  },

最后要在created狗子函数内判断用户是否记住了密码来执行相关的操作

//判断是否记住密码
//**注意这里的true是字符串格式,因为Boolean存进localstorage中会变成String**
 created() {
  //判断是否记住密码
  if (localStorage.getItem("rememberPsw") == 'true') {
   this.getCookie();
  }
 }

最后,界面贴上,其中rememberPsw是记住密码按钮的v-model值,currentPortId是第一个框的v-model值,password就是第二个框的v-model值啦。

vue中使用cookies和crypto-js实现记住密码和加密的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现简单的动画效果代码
Mar 18 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
vue实现信息管理系统
May 30 Javascript
vue中导出Excel表格的实现代码
Oct 18 #Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 #Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 #Javascript
使用JS获取页面上的所有标签
Oct 18 #Javascript
深入理解 Koa 框架中间件原理
Oct 18 #Javascript
JS实现十分钟倒计时代码实例
Oct 18 #Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 #Javascript
You might like
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
vue.js表格分页示例
2016/10/18 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
django页面跳转问题及注意事项
2019/07/18 Python
python开头的coding设置方法
2019/08/08 Python
请解释接口的显式实现有什么意义
2012/05/26 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
公务员转正考察材料
2014/02/07 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
班主任个人工作反思
2014/04/28 职场文书
体育专业自荐书
2014/05/29 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
银行先进个人总结
2015/02/15 职场文书
公司周年庆典致辞
2015/07/30 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫