前端crypto-js加密解密

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
            <button type="submits" οnclick="displayDate()" >点击</button>
    </body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>    
    <script>
        function displayDate(){
            let obj = JSON.stringify({
                    username: 'name',
                    password: 'word111',
                    code: 'code'
                  })
            let key = CryptoJS.enc.Utf8.parse('word123123') // 加密解密钥匙 CryptoJS会根据key 进行加密解密
            let srcs = CryptoJS.enc.Utf8.parse(obj)
            let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString() // mode: ase加密模式ecb 还可选CryptoJS.mode.CBC... padding:填充内容
            console.log(encrypted,'加密数据')
            let Data = CryptoJS.enc.Utf8.stringify(CryptoJS.AES.decrypt(encrypted, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })).toString()
            console.log(Data,'解密数据')
        }
    </script>
</html>

 vue 写法

先安装npm install crypto-js

在需要页面引入 import CryptoJS from "crypto-js";

moutend(){ 
var obj = JSON.stringify({
   username: 'name',
   password: 'word111',
   code: 'code'
})
// 加密
var key = CryptoJS.enc.Utf8.parse('word123123') 
let srcs = CryptoJS.enc.Utf8.parse(obj)
let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString()
console.log(encrypted,'加密数据')
let Data = CryptoJS.enc.Utf8.stringify(CryptoJS.AES.decrypt(encrypted, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })).toString()console.log(Data,'解密数据')

}

结果

加个获取crypto-js版本引用的线上地址    https://cdnjs.com/libraries/crypto-js

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值