美文网首页
前端使用crypto.js进行加密

前端使用crypto.js进行加密

作者: 果汁密码 | 来源:发表于2018-07-13 14:28 被阅读852次

在前端登录记住密码的时候需要前端来进行加密工作,接触到crypto这个js,使用还算简单,在这里记录一下
在vue框架中
安装crypto-js

npm install crypto-js --save-dev

utils.js

import CryptoJS from 'crypto-js'

/**
 * CryptoJS加密
 */
var getAES = function(data){ //加密
    var key  = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';  //密钥
    var iv   = '1234567812345678';
    var encrypted = getAesString(data,key,iv); //密文
    var encrypted1 = CryptoJS.enc.Utf8.parse(encrypted);
    return encrypted;
}

/**
 * CryptoJS解密
 */
var getDAes = function(data){//解密
    var key  = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';  //密钥
    var iv   = '1234567812345678';
    var decryptedStr = getDAesString(data,key,iv);
    return decryptedStr;
}

/**
 * 存储localStorage
 */
var setStore = (name, content) => {
    if (!name) return;
    if (typeof content !== 'string') {
        content = JSON.stringify(content);
    }
    window.localStorage.setItem(name, content);
}

/**
 * 获取localStorage
 */
var getStore = name => {
    if (!name) return;
    return window.localStorage.getItem(name);
}

/**
 * 删除localStorage
 */
var removeStore = name => {
    if (!name) return;
    window.localStorage.removeItem(name);
}
export default {
    getAES,
    getDAes,
    setStore,
    getStore,
    removeStore
}

component

<script>
import utils from '@/utils';
export default {
    methods: {
        remember() {
            try {
                let data = utils.getAES(JSON.stringify(this.formData));
                utils.setStore('loginInfo', data);
            } catch (err) {
                console.log(err)
            }
        },
        getRemember() {
            try {
                let crptyData = utils.getStore('loginInfo');
                if (crptyData) {
                    let data = utils.getDAes(crptyData);
                    this.formData = JSON.parse(data);
                } else {}
            } catch (err) {
                console.error(err.message);
            }
        },
        notRemember() {
            let data = utils.getStore('loginInfo');
            if (data) {
                utils.removeStore('loginInfo');
            }
        }
    }
}

</script>

key和iv都可以更换,但是需要保证的是加解密的key和iv保持一致

相关文章

  • 前端使用crypto.js进行加密

    在前端登录记住密码的时候需要前端来进行加密工作,接触到crypto这个js,使用还算简单,在这里记录一下在vue框...

  • 基于crypto-js进行加密

    1:安装crypto.js 2:通过crypto-js实现加密工具 3:使用,如何使用就不用我再阐述了。去吧,皮卡...

  • 前端加密:crypto.js的用法

    今天对项目的登陆做优化的时候,为了防暴力破解,要对账号密码等进行加密,后台小哥向我推荐了这个crypto.js,下...

  • AES+RSA加密联合使用

    AES+RSA加密联合使用 使用原因: 因为加密解密效率的问题 使用方式前端:前端对需要加密的数据进性AES加密,...

  • 登录加密

    使用sha256加密方式 原理:前端获取随机值,进行多次加密后下发给后端比对后端同样方式加密出来的密码的结果是否一...

  • SHA256进行登录加密传输

    使用sha256加密方式 原理:前端获取随机值,进行多次加密后下发给后端比对后端同样方式加密出来的密码的结果是否一...

  • iOS AES/CBC/PKCS7Padding加密、解密问题

    先直接贴上源码吧,给NSData添加加密、解密的扩展: .h文件 .m文件 使用方法 此处加密跟解密都是在前端进行...

  • Java 登录模块设计

    登录流程 前端登录传输用户名和md5加密后的密码 后端对密码在进行md5加密,或者使用md5加密的密码 + id ...

  • crypto-js与php aes加密传输

    CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法包括...

  • 基于aes的加解密方案

    对前端上送的报文进行解密和验签 1、前端上送的报文先进行整体加密,然后把整体加密的数据作为encodeFieldV...

网友评论

      本文标题:前端使用crypto.js进行加密

      本文链接:https://www.haomeiwen.com/subject/zeijpftx.html