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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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实现框架(二)
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
需要发散思维学习PHP
2009/06/29 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
python中reload(module)的用法示例详解
2017/09/15 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python修改列表值问题解决方案
2020/03/06 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
某公司.Net方向面试题
2014/04/24 面试题
公司清洁工岗位职责
2013/12/14 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
党支部承诺书
2015/01/20 职场文书
法律意见书范文
2015/05/20 职场文书
毕业证明书
2015/06/19 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
POST提交数据常见的四种方式
2022/01/18 HTML / CSS