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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
详解AngularJS 模块化
Jun 14 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
微信支付开发订单查询实例
2016/07/12 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Vuex 入门教程
2018/01/10 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
python操作日期和时间的方法
2014/03/11 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
如何理解python中数字列表
2020/05/29 Python
python 利用zmail库发送邮件
2020/09/11 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
求职自荐信的格式
2014/04/07 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
校外活动方案
2014/08/28 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
学生会主席任命书
2015/09/21 职场文书
化工生产实习心得体会
2016/01/22 职场文书