TS使用crypto-js进行加密

安装包：npm i @types/crypto-js --save-dev

引入封装

import CryptoJS from "crypto-js";

// 定义接口类型，根据需要可自行定义，此处供参考
export interface CrypotoType {
    encryptCBC: any
    decryptCBC: any
}

export default class Crypoto implements CrypotoType {
    private EK = "加密的向明值，自己根据项目实际情况定，需要跟后端开发保持一致";
    private keyHex = this.getHetKey()

    private getHetKey() {
        return CryptoJS.enc.Utf8.parse(this.EK);
    }

    /** CBC加密 */
    encryptCBC(word: string) {
        if (!word) {
            return word;
        }
        const srcs = CryptoJS.enc.Utf8.parse(word);
        const encrypted = CryptoJS.AES.encrypt(srcs, this.keyHex, {
            iv: this.keyHex,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.ZeroPadding
        });
        return encrypted.toString(); 
    }

    /** CBC解密 */
    decryptCBC(word: string) {
        if (!word) {
            return word;
        }
        const encryptedHexStr = CryptoJS.enc.Hex.parse(word);
        const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
        const decrypt = CryptoJS.AES.decrypt(srcs, this.keyHex, {
            iv: this.keyHex,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.ZeroPadding
        });
        const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
        return decryptedStr.toString();
    }
}

使用场景：

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import Crypoto from '../../utils/crypto';
const cry = new Crypoto();
export default defineComponent({
    setup() {
        // 加密
        const state = reactive({
            form: {
                username: '',
                password: ''
            }
        }
        const setPassword = () > {
            const password = cry.encryptCBC(state.form.password);
            const param: any = {
                password: encodeURIComponent(password) // 这里有的需要encodeURIComponent转换下字符串，有的不需要，根据情况处理
            }
            ...
            ...
        }
        return {
            ...toRefs(state),
            setPassword
        }
    }
})
</script>