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 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
jquery遍历json对象集合详解
May 18 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
koa源码中promise的解读
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 Memcached应用实现代码
2010/02/08 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
python实现rest请求api示例
2014/04/22 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python and、or以及and-or语法总结
2015/04/14 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
python 如何在测试中使用 Mock
2021/03/01 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
意大利网上药房:Farmacia 33
2020/01/27 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
1000字打架检讨书
2014/11/03 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
JavaScript 数组去重详解
2021/09/15 Javascript
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript