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 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue按需加载实例详解
2019/09/06 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
获取python文件扩展名和文件名方法
2018/02/02 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python自动下载图片的方法示例
2020/03/25 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
老师推荐信
2013/10/28 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
药店营业员岗位职责
2015/04/14 职场文书
个人廉政承诺书
2015/04/28 职场文书
个人维稳承诺书
2015/05/04 职场文书
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript