vue项目登录注册（crypto-js aes加解密）

1. 安装crypto-js
   cnpm install crypto-js -S
   crypto-js官网:https://github.com/brix/crypto-js

2. 封装Crypto-js工具，在src/utils目录中新建crypto.js，内容如下：

import CryptoJS from 'crypto-js';

// 默认的KEY与IV
// 秘钥：bGvnMc62sh5RV6zP
// 偏移量：1eZ43DLcYtV2xb3Y
const key = CryptoJS.enc.Utf8.parse('bGvnMc62sh5RV6zP') // 十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('1eZ43DLcYtV2xb3Y') // 十六位十六进制数作为密钥偏移量

// 解密方法
export function Decrypt(word) {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(word)
    const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
    const decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
    return decryptedStr.toString()
}

// 加密方法
export function Encrypt(word) {
    const srcs = CryptoJS.enc.Utf8.parse(word)
    const encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
    return encrypted.ciphertext.toString().toUpperCase()
}

3. 使用Crypto-js
   在登录页面中，引入我们刚写好的Crypto-js工具：

import Crypto from '@/utils/crypto.js'

接下来在登录方法中，接口调用前，把数据进行加密，并把加密后的数据组织好数据对象，然后传进登录接口即可。在handleLogin方法中，具体实现如下：

const username = Crypto.Encrypt(this.loginForm.username)
const password = Crypto.Encrypt(this.loginForm.password)
const data = {
	username: username,
	password: password
	}