有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue密码加密(Vue项目中使用AES加密)实现方式

vue 炮渣日记 4周前 (11-12) 21次浏览 已收录 0个评论 扫描二维码
  • vue项目中使用AES加密
      • 安装 crypto-js
      • 加入AES加密的文件
          • 在项目中新建一个文件 Aes.js
          • Aes.js
      • 引入AES加密模块
      • 应用举个栗
      • 一个小问题

VUE项目中使用AES加密

安装 CRYPTO-JS

npm install crypto-js
1
Vue密码加密(Vue项目中使用AES加密)实现方式

加入AES加密的文件

在项目中新建一个文件 AES.JS

可以新建在 srcutilsAes.js(文件名随意,目录尽量方便找到)

AES.JS

import CryptoJS from 'crypto-js/crypto-js'

/*
 * 默认的 KEY IV     如果在加密解密的时候没有传入KEY和IV,就会使用这里定义的
 * 
 * 前后端交互时需要前后端**和初始向量保持一致
 */

const KEY = CryptoJS.enc.Utf8.parse("1234567890ABCDEF");//  **        长度必须为16位
const IV = CryptoJS.enc.Utf8.parse("123456");           //  初始向量    长度随意

/*
 * AES加密 :字符串 key iv  返回base64
 */
export function Encrypt(str, keyStr, ivStr) {
    let key = KEY
    let iv = IV

    if (keyStr && ivStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let srcs = CryptoJS.enc.Utf8.parse(str);
    var encrypt = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,            //这里可以选择AES加密的模式
        padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Base64.stringify(encrypt.ciphertext);
}

/*
 * AES 解密 :字符串 key iv  返回base64
 */
export function Decrypt(str, keyStr, ivStr) {
    let key = KEY
    let iv = IV

    if (keyStr && ivStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let base64 = CryptoJS.enc.Base64.parse(str);
    let src = CryptoJS.enc.Base64.stringify(base64);

    var decrypt = CryptoJS.AES.decrypt(src, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,            //这里可以选择AES解密的模式
        padding: CryptoJS.pad.Pkcs7
    });

    var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

引入AES加密模块

在需要使用AES加密解密的方法的Vue组件中引入AES加密解密模块

import { Encrypt, Decrypt } from "@/utils/Aes.js";
1

使用AES加密解密的方法

let a = "Hello World!";
        console.log(a);
        // Encrypt 加密
        a = Encrypt(a);
        console.log(a);
        // Decrypt 解密
        a = Decrypt(a);
        console.log(a);
12345678

应用举个栗

axios({
  url: '/api/aaa/bbb',	// 后端的接口地址
  method: 'post',
  data: {
    userName: Encrypt(this.userName),
    password: Encrypt(this.password),
  },
  transformRequest: [function (data) {
    data = Qs.stringify(data);
    return data;
  }],
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
  dataType: "json"
})
  .then(res => {
    console.log("连接成功");		// 这里多打印一句提示,只是为了更直观一点
    console.log(res);			// res 是后端回传的数据,如果连接成功,可以把res打印出来。
  })
  .catch(function (error) {
  	console.log("连接失败");		// 作用同上
    console.log(error);			// 如果连接失败,会抛出错误信息。
  });

1234567891011121314151617181920212223

一个小问题

KEY长度必须是16位,IV长度任意
KEY长度不是16位时,可以进行加密,但是解密出来的值为空。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址