登录  /  注册
首页 > web前端 > js教程 > 正文

vue中cookies以及crypto-js如何实现密码的加密并记住

不言
发布: 2018-09-21 17:47:09
原创
3953人浏览过

本章给大家介绍关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

使用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类型)得先转成字符串

更多使用请访问官方文档

记住密码

  1. 实现原理是登录的时候,如果勾选了记住密码(把‘记住密码’状态保存到localstorage)就保存账号密码到cookies;

  2. 之后进入登录页面的时候,判断是否记住了密码(从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 <p>登录的方法如下:</p><pre class="brush:php;toolbar:false"> login() {
      this.$http //请根据实际情况修改该方法
        .post(...)
        .then(res =&gt; {
          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 =&gt; {
          //----
        });
    },
登录后复制

最后要在created狗子函数内判断用户是否记住了密码来执行相关的操作

//判断是否记住密码
//**注意这里的true是字符串格式,因为Boolean存进localstorage中会变成String**
 created() {
    //判断是否记住密码
    if (localStorage.getItem("rememberPsw") == 'true') {
      this.getCookie();
    }
  }
登录后复制

最后,界面贴上,其中rememberPsw是记住密码按钮的v-model值,currentPortId是第一个框的v-model值,password就是第二个框的v-model值啦。

1349316022-5ba3113b12f2e_articlex.png

以上就是vue中cookies以及crypto-js如何实现密码的加密并记住的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号