![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/02\/20260206024943-698556c7b24e1.png\")
<\/p>\nnpm install crypto-js –save<\/p>\n
Vue 3 \u7ec4\u4ef6\u4e2d\u4f7f\u7528crypto-js\u8fdb\u884c AES \u52a0\u5bc6\u548c\u89e3\u5bc6<\/p>\n
<template><\/p>\n
\u00a0 <div><\/p>\n
\u00a0 \u00a0 <input v-model="plaintext" placeholder="\u8f93\u5165\u8981\u52a0\u5bc6\u7684\u6587\u672c" \/><\/p>\n
\u00a0 \u00a0 <button @click="encrypt">\u52a0\u5bc6<\/button><\/p>\n
\u00a0 \u00a0 <button @click="decrypt">\u89e3\u5bc6<\/button><\/p>\n
\u00a0 \u00a0 <p>\u52a0\u5bc6\u540e\u7684\u6587\u672c: {{ ciphertext }}<\/p><\/p>\n
\u00a0 \u00a0 <p>\u89e3\u5bc6\u540e\u7684\u6587\u672c: {{ decryptedText }}<\/p><\/p>\n
\u00a0 <\/div><\/p>\n
<\/template><\/p>\n
<script setup><\/p>\n
\u00a0 import { ref } from 'vue'<\/p>\n
\u00a0 import CryptoJS from 'crypto-js'<\/p>\n<\/p>\n
\u00a0 defineProps({<\/p>\n
\u00a0 \u00a0 msg: String,<\/p>\n
\u00a0 })<\/p>\n<\/p>\n
\u00a0 const count = ref(0)<\/p>\n
\u00a0 \/\/ 1. \u5b9a\u4e49\u54cd\u5e94\u5f0f\u6570\u636e（\u66ff\u4ee3\u9009\u9879\u5f0fAPI\u7684data）<\/p>\n
\u00a0 const plaintext = ref('') \/\/ \u539f\u59cb\u6587\u672c<\/p>\n
\u00a0 const ciphertext = ref('') \/\/ \u52a0\u5bc6\u540e\u7684\u6587\u672c<\/p>\n
\u00a0 const decryptedText = ref('') \/\/ \u89e3\u5bc6\u540e\u7684\u6587\u672c<\/p>\n<\/p>\n
\u00a0 \/\/ 2. \u5b9a\u4e49\u52a0\u5bc6\u51fd\u6570（\u66ff\u4ee3\u9009\u9879\u5f0fAPI\u7684methods）<\/p>\n
\u00a0 const encrypt = () => {<\/p>\n
\u00a0 \u00a0 const secretKey = 'your-secret-key' \/\/ \u5efa\u8bae\u66ff\u6362\u4e3a\u81ea\u5df1\u7684\u5bc6\u94a5<\/p>\n
\u00a0 \u00a0 \/\/ AES\u52a0\u5bc6\u5e76\u8f6c\u6362\u4e3a\u5b57\u7b26\u4e32<\/p>\n
\u00a0 \u00a0 ciphertext.value = CryptoJS.AES.encrypt(<\/p>\n
\u00a0 \u00a0 \u00a0 plaintext.value,<\/p>\n
\u00a0 \u00a0 \u00a0 secretKey,<\/p>\n
\u00a0 \u00a0 ).toString()<\/p>\n
\u00a0 }<\/p>\n<\/p>\n
\u00a0 \/\/ 3. \u5b9a\u4e49\u89e3\u5bc6\u51fd\u6570<\/p>\n
\u00a0 const decrypt = () => {<\/p>\n
\u00a0 \u00a0 const secretKey = 'your-secret-key' \/\/ \u5fc5\u987b\u548c\u52a0\u5bc6\u5bc6\u94a5\u4e00\u81f4<\/p>\n
\u00a0 \u00a0 try {<\/p>\n
\u00a0 \u00a0 \u00a0 \/\/ \u89e3\u5bc6\u5e76\u8f6c\u6362\u4e3aUTF8\u5b57\u7b26\u4e32<\/p>\n
\u00a0 \u00a0 \u00a0 const bytes = CryptoJS.AES.decrypt(ciphertext.value, secretKey)<\/p>\n
\u00a0 \u00a0 \u00a0 decryptedText.value = bytes.toString(CryptoJS.enc.Utf8)<\/p>\n
\u00a0 \u00a0 } catch (error) {<\/p>\n
\u00a0 \u00a0 \u00a0 \/\/ \u6355\u83b7\u89e3\u5bc6\u5931\u8d25\u7684\u5f02\u5e38（\u6bd4\u5982\u5bc6\u94a5\u9519\u8bef\u3001\u5bc6\u6587\u65e0\u6548）<\/p>\n
\u00a0 \u00a0 \u00a0 decryptedText.value = '\u89e3\u5bc6\u5931\u8d25：\u5bc6\u6587\u65e0\u6548\u6216\u5bc6\u94a5\u9519\u8bef'<\/p>\n
\u00a0 \u00a0 \u00a0 console.error('\u89e3\u5bc6\u51fa\u9519：', error)<\/p>\n
\u00a0 \u00a0 }<\/p>\n
\u00a0 }<\/p>\n
<\/script><\/p>\n<\/p>\n
<style scoped><\/p>\n
\u00a0 .read-the-docs {<\/p>\n
\u00a0 \u00a0 color: #888;<\/p>\n
\u00a0 }<\/p>\n
<\/style><\/p>\n
\u5c01\u88c5\u52a0\u5bc6\u5de5\u5177<\/span>（\u63a8\u8350\u653e\u5728 src\/utils\/crypto.js）<\/p>\n 1.\u5bfc\u5165 crypto-js \u5e93\u7684\u6838\u5fc3\u6a21\u5757，\u8be5\u5e93\u5c01\u88c5\u4e86\u6240\u6709\u4e3b\u6d41\u52a0\u5bc6\u7b97\u6cd5（AES\u3001MD5\u3001SHA \u7b49），\u65e0\u9700\u81ea\u5df1\u5b9e\u73b0\u590d\u6742\u7684\u52a0\u5bc6\u903b\u8f91；<\/span><\/p>\n 2.\u5fc5\u987b\u901a\u8fc7 npm install crypto-js \u5b89\u88c5\u8be5\u4f9d\u8d56，\u5426\u5219\u4f1a\u62a5 \u201c\u627e\u4e0d\u5230\u6a21\u5757\u201d \u9519\u8bef；<\/span><\/p>\n ciphertext：\u52a0\u5bc6\u540e\u7684\u5bc6\u6587\u5b57\u7b26\u4e32（encryptAES \u7684\u8fd4\u56de\u503c）<\/span><\/p>\n key：\u89e3\u5bc6\u5bc6\u94a5（\u5fc5\u987b\u548c\u52a0\u5bc6\u5bc6\u94a5\u5b8c\u5168\u4e00\u81f4，\u5426\u5219\u89e3\u5bc6\u5931\u8d25）<\/span><\/p>\n ***!!!\u6ce8\u610f\u89e3\u5bc6\u65b9\u6cd5，\u53c2\u6570\u548c\u52a0\u5bc6\u5bf9\u5e94：\u5bc6\u6587\u3001\u89e3\u6790\u540e\u7684\u5bc6\u94a5\u3001\u76f8\u540c\u7684\u6a21\u5f0f \/ \u586b\u5145\u914d\u7f6e；<\/span><\/p>\n AES \u52a0\u5bc6\u6838\u5fc3\u89c4\u5219\u5bc6\u94a5\u957f\u5ea6\u8981\u6c42：<\/span><\/p>\n<\/p>\n \u586b\u5145\u7684\u4f5c\u7528:<\/span><\/p>\n<\/p>\n import CryptoJS from 'crypto-js'<\/span><\/p>\n \/\/ AES\/ECB\/PKCS7Padding\u00a0\u52a0\u5bc6\u51fd\u6570 encryptAES<\/span><\/p>\n export function encryptAES(text, key) {<\/span><\/p>\n \/\/ \u6b65\u9aa41：\u5c06\u5bc6\u94a5\u8f6c\u6362\u4e3a UTF8 \u7f16\u7801\u7684 WordArray \u683c\u5f0f<\/span><\/p>\n \u00a0 const keyHex = CryptoJS.enc.Utf8.parse(key)<\/span><\/p>\n \/\/ \u6b65\u9aa42：\u6267\u884c AES \u52a0\u5bc6<\/span><\/p>\n \u00a0 const encrypted = CryptoJS.AES.encrypt(text, keyHex, {<\/span><\/p>\n \u00a0 \u00a0 mode: CryptoJS.mode.ECB,<\/span><\/p>\n \u00a0 \u00a0 padding: CryptoJS.pad.Pkcs7<\/span><\/p>\n \u00a0 })<\/span><\/p>\n \/\/ \u6b65\u9aa43：\u8fd4\u56de\u52a0\u5bc6\u540e\u7684\u5b57\u7b26\u4e32<\/span><\/p>\n \u00a0 return encrypted.toString()<\/span><\/p>\n }<\/span><\/p>\n<\/p>\n \/\/ AES\/ECB\/PKCS7Padding \u89e3\u5bc6\u51fd\u6570 decryptAES<\/span><\/p>\n export function decryptAES(ciphertext, key) {<\/span><\/p>\n \/\/ \u6b65\u9aa41：\u5c06\u5bc6\u94a5\u8f6c\u6362\u4e3a UTF8 \u7f16\u7801\u7684 WordArray \u683c\u5f0f（\u548c\u52a0\u5bc6\u4e00\u81f4）<\/span><\/p>\n \u00a0 const keyHex = CryptoJS.enc.Utf8.parse(key)<\/span><\/p>\n \/\/ \u6b65\u9aa42：\u6267\u884c AES \u89e3\u5bc6<\/span><\/p>\n \u00a0 const decrypted = CryptoJS.AES.decrypt(ciphertext, keyHex, {<\/span><\/p>\n \/\/ \u89e3\u5bc6\u6a21\u5f0f\u5fc5\u987b\u548c\u52a0\u5bc6\u4e00\u81f4<\/span><\/p>\n \u00a0 \u00a0 mode: CryptoJS.mode.ECB,<\/span><\/p>\n \/\/ \u586b\u5145\u65b9\u5f0f\u5fc5\u987b\u548c\u52a0\u5bc6\u4e00\u81f4<\/span><\/p>\n \u00a0 \u00a0 padding: CryptoJS.pad.Pkcs7<\/span><\/p>\n \u00a0 })<\/span><\/p>\n \/\/ \u6b65\u9aa43：\u5c06\u89e3\u5bc6\u540e\u7684\u4e8c\u8fdb\u5236\u6570\u636e\u8f6c\u56de UTF8 \u5b57\u7b26\u4e32<\/span><\/p>\n \u00a0 return decrypted.toString(CryptoJS.enc.Utf8)<\/span><\/p>\n }<\/span><\/p>\n Vue3 \u7ec4\u4ef6\u4e2d\u4f7f\u7528（\u7ec4\u5408\u5f0f API）<\/p>\n <template><\/p>\n \u00a0 <div><\/p>\n \u00a0 \u00a0 <input v-model="plaintext" placeholder="\u8f93\u5165\u8981\u52a0\u5bc6\u7684\u6587\u672c" \/><\/p>\n \u00a0 \u00a0 <button @click="encrypt">\u52a0\u5bc6<\/button><\/p>\n \u00a0 \u00a0 <button @click="decrypt">\u89e3\u5bc6<\/button><\/p>\n \u00a0 \u00a0 <p>\u52a0\u5bc6\u540e\u7684\u6587\u672c: {{ ciphertext }}<\/p><\/p>\n \u00a0 \u00a0 <p>\u89e3\u5bc6\u540e\u7684\u6587\u672c: {{ decryptedText }}<\/p><\/p>\n \u00a0 <\/div><\/p>\n <\/template><\/p>\n<\/p>\n <script setup><\/p>\n \u00a0 import { ref } from 'vue'<\/p>\n \u00a0 \/\/ \u5f15\u5165\u5c01\u88c5\u7684\u52a0\u89e3\u5bc6\u65b9\u6cd5（\u786e\u4fdd@\u522b\u540d\u5df2\u914d\u7f6e，crypto.js\u6587\u4ef6\u5b58\u5728）<\/span><\/p>\n \u00a0 \/\/ Vite \u4e0d\u4f1a\u9ed8\u8ba4\u8bc6\u522b @ \u4f5c\u4e3a src \u76ee\u5f55\u7684\u522b\u540d，\u9700\u8981\u624b\u52a8\u914d\u7f6e vite.config.js<\/span><\/p>\n \u00a0 import { encryptAES, decryptAES } from '@\/utils\/crypto'<\/p>\n \u00a0 defineProps({<\/p>\n \u00a0 \u00a0 msg: String,<\/p>\n \u00a0 })<\/p>\n \u00a0 const count = ref(0)<\/p>\n \u00a0 const plaintext = ref('') \/\/ \u539f\u59cb\u6587\u672c<\/p>\n \u00a0 const ciphertext = ref('') \/\/ \u52a0\u5bc6\u540e\u7684\u6587\u672c<\/p>\n \u00a0 const decryptedText = ref('') \/\/ \u89e3\u5bc6\u540e\u7684\u6587\u672c<\/p>\n<\/p>\n \u00a0 \/\/ 1. \u52a0\u5bc6\u65b9\u6cd5（\u70b9\u51fb\u52a0\u5bc6\u6309\u94ae\u89e6\u53d1）<\/p>\n \u00a0 const encrypt = () => {<\/p>\n \u00a0 \u00a0 \/\/ \u6821\u9a8c：\u786e\u4fdd\u8f93\u5165\u5185\u5bb9\u4e0d\u4e3a\u7a7a<\/p>\n \u00a0 \u00a0 if (!plaintext.value.trim()) {<\/p>\n \u00a0 \u00a0 \u00a0 alert('\u8bf7\u8f93\u5165\u8981\u52a0\u5bc6\u7684\u6587\u672c！')<\/p>\n \u00a0 \u00a0 \u00a0 return<\/p>\n \u00a0 \u00a0 }<\/p>\n<\/p>\n \u00a0 \u00a0 \/\/ \u5b9a\u4e49\u52a0\u5bc6\u5bc6\u94a5（\u5efa\u8bae16\u4f4d\u621632\u4f4d，\u5b9e\u9645\u9879\u76ee\u4e0d\u8981\u786c\u7f16\u7801）<\/p>\n \u00a0 \u00a0 const secretKey = '1234567890123456' \/\/ 16\u4f4d\u5bc6\u94a5（AES-128）<\/p>\n<\/p>\n \u00a0 \u00a0 try {<\/p>\n \u00a0 \u00a0 \u00a0 \/\/ \u8c03\u7528encryptAES\u65b9\u6cd5\u52a0\u5bc6<\/p>\n \u00a0 \u00a0 \u00a0 ciphertext.value = encryptAES(plaintext.value, secretKey)<\/p>\n \u00a0 \u00a0 \u00a0 console.log(ciphertext.value)<\/p>\n \u00a0 \u00a0 \u00a0 decryptedText.value = '' \/\/ \u52a0\u5bc6\u540e\u6e05\u7a7a\u89e3\u5bc6\u7ed3\u679c<\/p>\n \u00a0 \u00a0 } catch (error) {<\/p>\n \u00a0 \u00a0 \u00a0 alert('\u52a0\u5bc6\u5931\u8d25：' + error.message)<\/p>\n \u00a0 \u00a0 \u00a0 console.error('\u52a0\u5bc6\u9519\u8bef：', error)<\/p>\n \u00a0 \u00a0 }<\/p>\n \u00a0 }<\/p>\n<\/p>\n \u00a0 \/\/ 2. \u89e3\u5bc6\u65b9\u6cd5（\u70b9\u51fb\u89e3\u5bc6\u6309\u94ae\u89e6\u53d1）<\/p>\n \u00a0 const decrypt = () => {<\/p>\n \u00a0 \u00a0 \/\/ \u6821\u9a8c：\u786e\u4fdd\u6709\u52a0\u5bc6\u540e\u7684\u5bc6\u6587<\/p>\n \u00a0 \u00a0 if (!ciphertext.value.trim()) {<\/p>\n \u00a0 \u00a0 \u00a0 alert('\u8bf7\u5148\u52a0\u5bc6\u751f\u6210\u5bc6\u6587！')<\/p>\n \u00a0 \u00a0 \u00a0 return<\/p>\n \u00a0 \u00a0 }<\/p>\n<\/p>\n \u00a0 \u00a0 \/\/ \u89e3\u5bc6\u5bc6\u94a5\u5fc5\u987b\u548c\u52a0\u5bc6\u5bc6\u94a5\u4e00\u81f4<\/p>\n \u00a0 \u00a0 const secretKey = '1234567890123456'<\/p>\n<\/p>\n \u00a0 \u00a0 try {<\/p>\n \u00a0 \u00a0 \u00a0 \/\/ \u8c03\u7528decryptAES\u65b9\u6cd5\u89e3\u5bc6<\/p>\n \u00a0 \u00a0 \u00a0 decryptedText.value = decryptAES(ciphertext.value, secretKey)<\/p>\n \u00a0 \u00a0 } catch (error) {<\/p>\n \u00a0 \u00a0 \u00a0 alert('\u89e3\u5bc6\u5931\u8d25（\u5bc6\u94a5\u9519\u8bef\u6216\u5bc6\u6587\u65e0\u6548）：' + error.message)<\/p>\n \u00a0 \u00a0 \u00a0 console.error('\u89e3\u5bc6\u9519\u8bef：', error)<\/p>\n \u00a0 \u00a0 }<\/p>\n \u00a0 }<\/p>\n <\/script><\/p>\n<\/p>\n <style scoped><\/p>\n \u00a0 .read-the-docs {<\/p>\n \u00a0 \u00a0 color: #888;<\/p>\n \u00a0 }<\/p>\n \u00a0 \/* \u7b80\u5355\u7f8e\u5316\u6837\u5f0f，\u53ef\u9009 *\/<\/p>\n \u00a0 div {<\/p>\n \u00a0 \u00a0 padding: 20px;<\/p>\n \u00a0 }<\/p>\n \u00a0 input {<\/p>\n \u00a0 \u00a0 padding: 8px;<\/p>\n \u00a0 \u00a0 width: 300px;<\/p>\n \u00a0 \u00a0 margin-right: 10px;<\/p>\n \u00a0 }<\/p>\n \u00a0 button {<\/p>\n \u00a0 \u00a0 padding: 8px 16px;<\/p>\n \u00a0 \u00a0 margin: 0 5px;<\/p>\n \u00a0 \u00a0 cursor: pointer;<\/p>\n \u00a0 \u00a0 background: #42b983;<\/p>\n \u00a0 \u00a0 color: white;<\/p>\n \u00a0 \u00a0 border: none;<\/p>\n \u00a0 \u00a0 border-radius: 4px;<\/p>\n \u00a0 }<\/p>\n \u00a0 button:hover {<\/p>\n \u00a0 \u00a0 background: #359469;<\/p>\n \u00a0 }<\/p>\n \u00a0 p {<\/p>\n \u00a0 \u00a0 margin: 10px 0;<\/p>\n \u00a0 \u00a0 color: #333;<\/p>\n \u00a0 }<\/p>\n <\/style><\/p><\/p>\n","protected":false},"excerpt":{"rendered":" \u5728 CryptoJS \u5e93\u4e2d，Base64\u3001MD5 \u548c AES \u662f\u4e09\u79cd\u4e0d\u540c\u6027\u8d28\u7684\u7f16\u7801\u6216\u52a0\u5bc6\u65b9\u6cd5，\u5b83\u4eec\u5728\u539f\u7406\u3001\u7528\u9014\u548c\u5b89\u5168\u6027\u4e0a\u6709\u672c\u8d28\u533a\u522b\u7279\u6027\u00a0Base64\u00a0\u00a0\u4e0d\u5b89\u5168（\u4ec5\u7f16\u7801）\u5e38\u7528\u4e8e\u6570\u636e\u683c\u5f0f\u8f6c\u6362，\u8f93\u51fa\u5f62\u5f0f\u662f\u6587\u672c\u5b57\u7b26\u4e32MD5\u00a0\u4e0d\u5b89\u5168（\u54c8\u5e0c） \u5e38\u7528\u4e8e\u5b8c\u6574\u6027\u6821\u9a8c\u3001\u65e7\u5bc6\u7801\u5b58\u50a8，\u8f93\u51fa\u5f62\u5f0f\u662f32\u4f4d\u5341\u516d\u8fdb\u5236\u5b57\u7b26\u4e32AES\u00a0\u5b89\u5168（\u5bf9\u79f0\u52a0\u5bc6）\u5e38\u7528\u4e8e\u4fdd\u5bc6\u6570\u636e\u4f20\u8f93\u4e0e\u5b58\u50a8<\/p>\n","protected":false},"author":2,"featured_media":72658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,625,87],"topic":[],"class_list":["post-72659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-javascript","tag-vue-js","tag-87"],"yoast_head":"\n\n
\n