Crypto-js の暗号化および復号化メソッド。コピーして使用するだけです

1.crypto-jsをインストールする

npm install crypto-js

 

2. カプセル化暗号化方式

このメソッドを格納するjsを別途jsにカプセル化して、後で導入します

import CryptoJS from 'crypto-js';
let aesKeyInfo = {
    key: '0123456789abcdef',
    iv: 'abcdef0123456789', // 密钥偏移量，16个字符
};
let desKeyInfo = {
    key: '0123456789abcdef',
    iv: 'abcdef0123456789', // 密钥偏移量，16个字符
};
let defaultAesMode = CryptoJS.mode.CBC;
let defaultAesPadding = CryptoJS.pad.Pkcs7;
let defaultDesMode = CryptoJS.mode.CBC;
let defaultDesPadding = CryptoJS.pad.Pkcs7;
/** 设置aes默认的密钥和偏移量 */
export function setDefaultAesKeyInfo(keyInfo) {
    aesKeyInfo = keyInfo;
}
/** 设置默认的密钥和偏移量 */
export function setDefaultDesKeyInfo(keyInfo) {
    desKeyInfo = keyInfo;
}
/** 设置默认aes加密模式 */
export function setDefaultAesMode(mode) {
    defaultAesMode = mode;
}
/** 设置默认aes padding模式 */
export function setDefaultAesPadding(padding) {
    defaultAesPadding = padding;
}
/** 设置默认des加密模式 */
export function setDefaultDesMode(mode) {
    defaultDesMode = mode;
}
/** 设置默认des padding模式 */
export function setDefaultDesPadding(padding) {
    defaultDesPadding = padding;
}
/**
 * 加密aes字符串
 */
function encodeAesString(data, { key = aesKeyInfo.key, iv = aesKeyInfo.iv, mode = defaultAesMode, padding = defaultAesPadding, } = {
    key: aesKeyInfo.key,
    iv: aesKeyInfo.iv,
    mode: defaultAesMode,
    padding: defaultAesPadding,
}) {
    const encrypted = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(iv),
        mode,
        padding,
    });
    return encrypted.toString(); // 返回的是base64格式的密文
}
/**
 * 解密aes字符串
 */
function decodeAesString(encrypted, { key = aesKeyInfo.key, iv = aesKeyInfo.iv, mode = defaultAesMode, padding = defaultAesPadding, } = {
    key: aesKeyInfo.key,
    iv: aesKeyInfo.iv,
    mode: defaultAesMode,
    padding: defaultAesPadding,
}) {
    const decrypted = CryptoJS.AES.decrypt(encrypted, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(iv),
        mode,
        padding,
    });
    return decrypted.toString(CryptoJS.enc.Utf8); // 返回解密后的原文
}
/** AES对称加密解密 */
const aes = {
    en: encodeAesString,
    de: decodeAesString,
};
/** 加密des字符串 */
const encodeDesString = function (data, { key = desKeyInfo.key, iv = desKeyInfo.iv, mode = defaultDesMode, padding = defaultDesPadding, } = {
    key: desKeyInfo.key,
    iv: desKeyInfo.iv,
    mode: defaultDesMode,
    padding: defaultDesPadding,
}) {
    var encrypted = CryptoJS.DES.encrypt(data, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(iv),
        mode,
        padding,
    });
    return encrypted.toString();
};
/**
 * 解密des字符串
 */
function decodeDesString(data, { key = desKeyInfo.key, iv = desKeyInfo.iv, mode = defaultDesMode, padding = defaultDesPadding, } = {
    key: desKeyInfo.key,
    iv: desKeyInfo.iv,
    mode: defaultDesMode,
    padding: defaultDesPadding,
}) {
    const decrypted = CryptoJS.DES.decrypt(data, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(iv),
        mode,
        padding,
    });
    return decrypted.toString(CryptoJS.enc.Utf8); // 返回解密后的原文
}
/** Des对称加密解密 */
const des = {
    en: encodeDesString,
    de: decodeDesString,
};
/** BASE64转码 */
const base64 = {
    en: (data) => CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(data)),
    de: (data) => CryptoJS.enc.Base64.parse(data).toString(CryptoJS.enc.Utf8),
};
/** SHA256摘要 */
const sha256 = (data) => {
    return CryptoJS.SHA256(data).toString();
};
/** md5摘要 */
const md5 = (data) => {
    return CryptoJS.MD5(data).toString();
};
// 导出可用方法
export { aes, des, md5, sha256, base64, decodeAesString, encodeAesString, decodeDesString, encodeDesString }

3. 使用方法

1. vueプロジェクトのルートディレクトリ配下のmain.jsに記述し、グローバル登録・利用を実現します

import Vue from "vue";
import App from "./App.vue";

// 引入暴露出的加密解密方法这里以DES为例
import {
  setDefaultDesKeyInfo,
  encodeDesString,
  decodeDesString,
} from "@/utils/index";
// 设置和后端对应的key和偏移量
setDefaultDesKeyInfo({ key: "写入密钥", iv: "写入偏移量" });
// 将解密和解密方法挂在vue原型上
Vue.prototype.$jiami = encodeDesString;
Vue.prototype.$jiemi = decodeDesString;

2.呼び出し方法

<template>
  <div id="app">
    <h1>测试解密</h1>
    <p>加密前：我是无敌大帅哥</p>
    <button @click="md5">加密</button>
    <p v-if="text">加密后：{
   
   { text }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: null, //解密后
    };
  },
  methods: {
    md5() {
      // 启动加密
      this.text = this.$jiami("我是无敌大帅哥");
    },
  },
  created() {
    // 启动解密
    console.log(this.$jiemi("放入后端给你的加密后的字符串测试"));
  },
};
</script>

<style></style>

バックエンドとのアルゴリズムを相談して使用する方法を決定しますが、個人的には現在は AES と DES が主に使用されていると思います。

この記事は実践的な操作に焦点を当てていますので、お役に立てましたら、高評価をお願いします。