Vue第17篇,前端使用AES密码加密、解密,使用详细(crypto加密解密,前后端分离,AES加密解密)

前言:我们在数据传输、存储数据、身份验证和授权、API通信、隐私保护时,有时候会用到AES(Advanced Encryption Standard,高级加密标准)进行数据的加密和解密工具。这里我们利用CryptoJS、来实现AES加密和解密,记录一下


Vue.js ~ 第 17 篇    ——    Vue使用AES加密和解密

一. 首先安装 crypto-js插件,安装命令如下

npm install  crypto-js -S
// 或者
cnpm install  crypto-js -S

1. 含义

-S等同于--save,保存在package.json文件中,是在dependencies 下,
--save安装包信息将加入到dependencies(生产环境)中,生产阶段的依赖,也就是项目运行时的依赖,就是程序上线后仍然需要依赖;

-D等同于--save-dev,也保存在package.json文件中,是在devDependencies下,
--save-dev 安装包信息将加入到devDependencies(开发环境)中,开发阶段的依赖,就是我们在开发过程中需要的依赖,只在开发阶段起作用。

2. 详见,请看

--save,--save-dev,--global各自的含义icon-default.png?t=N7T8https://blog.csdn.net/weixin_65793170/article/details/128267888?ops_request_misc=&request_id=5443803715234ac993eeceda37affce9&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~koosearch~default-1-128267888-null-null.268%5Ev1%5Econtrol&utm_term=-s&spm=1018.2226.3001.4450


二. 然后新建crypto.js文件,封装自定义加密和解密的方法,并导出

import CryptoJS from 'crypto-js'
 
// 默认的KEY与iv与后端保持一致,不采用后端传值密钥
const KEY = CryptoJS.enc.Utf8.parse('aaDJL2d9DfhLZO0z');// 密钥
const IV = CryptoJS.enc.Utf8.parse('412ADDSSFA342442');// 偏移量  

/** AES加密 */
export function Encrypt(word, keyStr, ivStr) {
  let key = KEY;
  let iv = IV;
 
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
 
  let srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
 
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
 
},},


/** AES 解密 */
export function Decrypt(word, keyStr, ivStr) {
  let key  = KEY;
  let iv = IV;
 
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
 
  let base64 = CryptoJS.enc.Base64.parse(word);
  let src = CryptoJS.enc.Base64.stringify(base64);
 
  var decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
 
  var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();

},},


三. 直接在需要页面,引入使用

//引入
import {Decrypt,Encrypt} from "./crypto.js";

//使用方式
Encrypt(JSON.stringify(config.data));//加密

eg: //密码加密
this.formLogin.password = Encrypt(JSON.stringify(this.formLogin.password));

JSON.parse(Decrypt(response.data));//解密

eg: //密码解密
this.formLogin.password = JSON.parse(Decrypt(this.getCookie("password")));

创作不易,感觉有用,就一键三连,感谢(●'◡'●)

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北城笑笑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值