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 相关文章推荐
JS 对象介绍
Jan 20 Javascript
js操作二级联动实现代码
Jul 27 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
htm调用JS代码
2007/03/15 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python2随机数列生成器简单实例
2017/09/04 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
2014年幼儿园小班工作总结
2014/12/04 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
法制工作总结2015
2015/07/23 职场文书
新郎结婚感言
2015/07/31 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
简短清晨问候语
2015/11/10 职场文书
2016年春节问候语
2015/11/11 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
React四级菜单的实现
2022/04/08 Javascript