vue3（TS）登录账号和密码进行加密 （crypto-js）要求:aes cbc 填充模式: PKCS7 , base64URL格式

记得先安装crypto-js依赖

npm install crypto-js
npm install --save @types/crypto-js

1.在utils下新建一个AES-Pkcs7.ts文件 用来封装加密方法

import CryptoJS from 'crypto-js'
 
export interface CrypotoType {
  encrypt: any
  decrypt: any
}

export default class Crypoto implements CrypotoType {
  key = CryptoJS.enc.Utf8.parse('123456789') // 这里找后端要
  iv = CryptoJS.enc.Utf8.parse('987654321') // 这里找后端要

  /* 加密 */
  encrypt(word: any) {
    const srcs = CryptoJS.enc.Utf8.parse(word)
    const encrypted = CryptoJS.AES.encrypt(srcs, this.key, { iv: this.iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
    const ciphertext = encrypted.ciphertext.toString(CryptoJS.enc.Base64url) // 将加密结果转换为 Base64URL 格式 确认后端要的是Base64URL 还是Base64 这两种编码格式不一样
    return ciphertext
  }
}

2.在你的login.vue页面引入

import Crypoto from '@/utils/util/AES-Pkcs7';

const cry: any = new Crypoto()

let loginInfo = ref({
  account: '',
  password: '',
})

const loginClick = (value: string) =>{

  //加密 账号密码格式：
//`{"account":"test_account","password":"test_passwd"}`

  const dataItem: any = {
    account: loginInfo.value.account, // 
    password: loginInfo.value.password,
  }

  const encryptData = cry.encrypt(JSON.stringify(dataItem))

// 这里根据后端要求格式来传  加密之后：
//{
//  "data": "j-D9FSdnAca4Q1R8oc0jiOkZ3Ex47Lts7EixKNuWoZ_hcq2B0_D9rhqF9KCq_oRsv0__iP2F7AJfTw5eaXua5Q"
//}
  getUserLogin({data:encryptData}).then((res:any)=>{
    ...
  }) 
}

<InputItem title="账号">
        <XInput ref="adminRef" v-model="loginInfo.account" type="text" :regex="/^.+$/"</XInput>
</InputItem>
InputItem title="密码">
  <XInput ref="passwordRef" v-model="loginInfo.password" type="password":regex="/^.+$/"></XInput>
</InputItem>