vue中使用cookies和crypto-js实现记住密码和加密

khs1994 发布于2019-08-26 12:19 / 2467人阅读

摘要：最后要在狗子函数内判断用户是否记住了密码来执行相关的操作判断是否记住密码注意这里的是字符串格式，因为存进中会变成判断是否记住密码最后，界面贴上，其中是记住密码按钮的值，是第一个框的值，就是第二个框的值啦。

不多BB，搞快、搞快、

使用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值啦。

最后

我也是一个新手，写得不好的地方请轻喷~有好的建议也可以评论告诉下~谢谢大家

云服务器超融合服务器 php中session和cookie md5和sha加密代码实现 vue 中使用 webrtc vue中使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108494.html

vue项目实现记住密码到cookie功能(附源码)

摘要：这里不做加密功能源码链接项目实现表单登录页保存账号和密码到功能觉得对你有帮助的话，下哦。 showImg(https://segmentfault.com/img/remote/1460000013052745?w=443&h=335); 实现功能： 1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内 2.不勾选，点登陆时候则清空之前保存到cooki...

zzir 2019-08-26 11:31 评论0 收藏0
一套简单的基于 RSA + AES 加密机制的前端解决方案

摘要：前言因公司现有后台管理系统项目需对部分网络请求接口的重要数据进行加密，整合了一套简单的基于加密机制的前端解决方案。用户已登录成功，页面刷新后将会重新生成，这时候需从中获取并和上传后端，后端重新绑定和。前言因公司现有后台管理系统项目需对部分网络请求接口的重要数据进行加密，整合了一套简单的基于 RSA + AES 加密机制的前端解决方案。参考文献： crypto 廖雪峰 crypt...

Travis 2019-08-23 17:58 评论0 收藏0
js使用AES加密PHP使用Openssl解密

摘要：最近遇到的几个网站在提交密码时提交的已经是密文，也就是说在网络上传输的密码是密文，这样提升了密码在网络传输中的安全性。今天一起来了解一下基于的前后端加解密流程。由于是块加密，铭文被分割成固定长度的块一般是字节长度，所以也是字节。最近遇到的几个网站在提交密码时提交的已经是密文，也就是说在网络上传输的密码是密文，这样提升了密码在网络传输中的安全性。后端语言加解密已经有很成熟的方案了，前...

shleyZ 2019-08-23 18:37 评论0 收藏0
VueJs里利用CryptoJs实现加密及解密

摘要：第一步安装安装第二步创建在文件目录下创建一个文件对页面上输入的密码进行加密传输给后台进行验证，对返回的数据进行解密，在页面展示引入源码对密码进行加密，传输给后台进行验证需要加密的密码对密码加密的秘钥加密的密文加密对加密之后的密文在页面上第一步安装安装crypto-jsshowImg(https://segmentfault.com/img/bVbrXWM); 第二步创建在js文件...

shleyZ 2019-08-23 17:11 评论0 收藏0
演示Vue实现记住账号密码功能的思路和代码

　　实现思路：　　情景：在用户登录时若勾选记住我功能选项，则将登录名和密码（加密后）存入本地缓存，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中。　　在本地缓存可以用cookies、localStorage、sessionStorage，但这些都有很多不同的差异，不多说废话。直接说使用我们的，在未设置过期时间，关闭浏览器窗口后就被清除了，显然是符合我们开发需求的，loc...

3403771864 2022-10-23 14:40 评论0 收藏0