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浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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生成带有雪花背景的验证码
2006/10/09 PHP
一个分页的论坛
2006/10/09 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php检测文件编码的方法示例
2014/04/25 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
Python fileinput模块使用实例
2015/05/28 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
学生期末评语大全
2014/04/30 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
python中redis包操作数据库的教程
2022/04/19 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL