vue aes加密解密

### 在 Vue.js 中使用 AES 实现加密和解密

为了在 Vue.js 项目中实现 AES 的加密和解密功能，需先安装 `crypto-js` 库。这可以通过运行命令来完成：

npm install crypto-js --save-dev

之后，创建一个用于封装 AES 加密解密逻辑的文件，比如命名为 `AES.js`。

#### 创建 AES 工具类

定义两个主要的功能函数——一个是用来加密数据，另一个则是负责解密操作。下面展示了一个简单的工具类实例[^1]：

// utils/AES.js
import CryptoJS from 'crypto-js';

const key = CryptoJS.enc.Utf8.parse('1234567890abcdef'); // 定义秘钥
const iv = CryptoJS.enc.Utf8.parse('abcdef9876543210');  // 初始化向量 (IV)

export function encrypt(word) {
    const srcs = CryptoJS.enc.Utf8.parse(word);
    const encrypted = CryptoJS.AES.encrypt(srcs, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.toString();
}

export function decrypt(word) {
    const decrypted = CryptoJS.AES.decrypt(word, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

此代码片段展示了如何利用 `crypto-js` 来设置 AES CBC 模式的加密与解密过程，并指定了 UTF-8 编码方式处理字符串输入输出[^2]。

#### 注册全局方法以便于访问

为了让整个应用程序都能方便地调用这些加密/解密方法，可以在项目的入口文件 (`main.js`) 中注册它们作为 Vue 的原型属性[^3]：

// main.js
import Vue from 'vue';
import App from './App.vue';
import { encrypt, decrypt } from './utils/AES';

Vue.config.productionTip = false;

Vue.prototype.$encrypt = encrypt;
Vue.prototype.$decrypt = decrypt;

new Vue({
  render: h => h(App),
}).$mount('#app');

这样做的好处在于任何组件都可以直接通过 `this.$encrypt()` 或者 `this.$decrypt()` 调用上述定义好的静态方法来进行相应的加密或解密工作[^4]。