基于VUE的前端crypto-js aes加密与解密

2019独角兽企业重金招聘Python工程师标准>>>

第一步： npm install crypto-js --save

第二步：在utils文件夹下新建secret.js文件，封装公共方法。

密钥可由服务端返回

const CryptoJS = require('crypto-js');  //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量//加密方法
export function Encrypt(word){let srcs = CryptoJS.enc.Utf8.parse(word);let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });return encrypted.ciphertext.toString().toUpperCase();
}
//解密方法
export function Decrypt(word){let encryptedHexStr = CryptoJS.enc.Hex.parse(word);let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);return decryptedStr.toString();
}

第三步：使用引用

1.加密页面

<script>
import { Encrypt } from '../../utils/secret.js'
export default {created(){this.encryptionName = Encrypt(this.username) // 加密用户名this.getList()}
}
</script>

2.解密页面

<script>
import { Decrypt } from '../../utils/secret.js'
export default {created(){this.encryptionName = Decrypt(this.username) // 解密用户名}
}
</script>

完成！

原理实现推荐这篇文章：AES加密算法的详细介绍与实现

转载于:https://my.oschina.net/lemonfive/blog/2962495

基于VUE的前端crypto-js aes加密与解密相关推荐

前端用crypto.js进行加密和解密
import CryptoJS from 'crypto-js' function getAesString(data,key,iv){//加密var key = CryptoJS.enc.Utf8. ...
js aes加密_nodejs中使用Crypto-JS对图片进行加解密
在用nodejs开发后台的时候,为了安全的需要,经常会有加密的需求,对前端传入的图片进行AES加密后存储,然后在前端调用的时候,对图片进行解密,并返回Base64编码格式的图片. Crypto-JS这 ...
aes加密算法python实现_Python基于pycrypto实现的AES加密和解密算法示例
本文实例讲述了Python基于pycrypto实现的AES加密和解密算法.分享给大家供大家参考,具体如下: 一代码 # -*- coding: UTF-8 -*- import string imp ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
探讨.NET Core中实现AES加密和解密以及.NET Core为我们提供了什么方便！
前言对于数据加密和解密每次我都是从网上拷贝一份,无需有太多了解,由于在.net core中对加密和解密目前全部是统一了接口,只是做具体的实现,由于遇到过问题,所以将打算基本了解下其原理,知其然足矣, ...
python实现字母的加密和解密字典_python实现AES加密与解密
AES加密方式有五种:ECB, CBC, CTR, CFB, OFB 从安全性角度推荐CBC加密方法,本文介绍了CBC,ECB两种加密方法的python实现 python 在 Windows下使用AE ...
openssl 加密解密指令_openssl命令aes加密和解密
openssl命令aes加密和解密日期:2014-11-12 10:41:25 最后更新日期:2017-07-06 10:00:10 [技术] man openssl查看openssl的功能: [c ...
Golang里的AES加密、解密
AES加密和解密的三种模式实现(CBC/ECB/CFB) package mainimport ( "bytes" "crypto/aes" "cry ...
Java中的AES加密和解密（CBC模式）
通过有线方式传输诸如纯文本密码之类的机密数据总是容易受到安全性的影响,始终建议对此类信息进行加密并使用SSL传输这些机密数据.Java为此提供了多种加密算法.在本文中,我们将讨论Java中具有CBC模 ...
Oracle的AES加密与解密用法
Oracle的AES加密与解密用法版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/it ...

基于VUE的前端crypto-js aes加密与解密

基于VUE的前端crypto-js aes加密与解密相关推荐

最新文章

热门文章