一、安装crypto-js

npm install crypto-js

二、封装加密方法

单独在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 }

三、使用方法

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

本篇文章比较注重实操，如果帮到了你，请你帮我点赞，原创不易。