nuxtjs 中使用crypto-js进行加密以及解密

行云流水626

于 2023-06-27 08:43:44 发布

阅读量1k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Lsir1998/article/details/131409175

版权

文章介绍了如何在utils.js文件中创建一个模块，该模块导入CryptoJS库并定义了用于AES加密和解密的函数。这些函数被注入到Nuxt.js应用中，可以在组件的asyncData和methods中使用，以便对字符串和对象进行加解密操作。

摘要由CSDN通过智能技术生成

在utils文件夹中新建utils.js

import CryptoJS from 'crypto-js'
const key = CryptoJS.enc.Utf8.parse("1234567890000000");
const iv = CryptoJS.enc.Utf8.parse("1234567890000000");
export default (app,inject) => {
    inject('encrypt',word=>{
        let encrypted = "";
        if (typeof word == "string") {
            encrypted = CryptoJS.AES.encrypt(word, key, { iv: iv }).toString()
        } else if (typeof word == "object") {
            const data = JSON.stringify(word);
            encrypted = CryptoJS.AES.encrypt(data, key, { iv: iv }).toString()
        }
        return encrypted;
    })

    inject('decrypt',word=>{
        const decryptedStr = CryptoJS.AES.decrypt(word, key, { iv: iv }).toString(CryptoJS.enc.Utf8)
        return decryptedStr.toString();
    })
    
}

在nuxt.config.js中引入

export default {

  plugins: [
    '@/utils/utils',
  ],
 
}

组件中使用：

export default{
    //在asyncData中使用
    asyncData(app){
       //加密
        const str = app.$encrypt('123455')
        //解密
        const str2 = app.$decrypt(str)
    },
    //在methods中使用的话可以直接通过this.$encrypt和this.$decrypt进行加解密
}