vue項(xiàng)目中使用crypto-js實(shí)現(xiàn)加密解密方式
vue使用crypto-js實(shí)現(xiàn)加密解密
注意:
crypto-js加密后可自行選擇是否轉(zhuǎn)為base64,也需要后端配合加解密方法
npm install crypto-js
uitls新建文件夾screate.js
const CryptoJS = require('crypto-js'); //引用AES源碼js
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六進(jìn)制數(shù)作為密鑰
// const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六進(jìn)制數(shù)作為密鑰偏移量 可用可不用
//加密方法
export function Encrypt(word:any){
// 法一:加密后轉(zhuǎn)化為base64
// let srcs = CryptoJS.enc.Utf8.parse(word);
// let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
// return encrypted.ciphertext.toString();
// 法二:不轉(zhuǎn)
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
return encrypted.toString();
}
//解密方法
export function Decrypt(word:any){
// 法一:對(duì)應(yīng)解密
// let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
// let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
// let decrypt = CryptoJS.AES.decrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
// let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
// return decryptedStr.toString();
// 法二:
var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}使用
參數(shù)是對(duì)象的話,加密需要 JSON.stringify(),解密需要JSON.parse()
getData(){
letparams = {
"appId": '0000',
"bizData": {
"appName": '測(cè)試名稱',
"authMode": "0x1113"
},
"bizType": 1000
}
var aa = Encrypt(JSON.stringify(params))
console.log(aa, '加密')
searchHandle('/xxx/xxx/xxx', aa).then(res=>{
console.log('接口返回',res.data)
var dd = JSON.parse(Decrypt(aa))
console.log(dd, '解密')
if(res.data.code === 0){}
})
}
使用crypto-js時(shí)報(bào)錯(cuò)TypeError: Object(...) is not a function
控制臺(tái)報(bào)錯(cuò)
如下:

原因
引入Encrypt時(shí)方式錯(cuò)誤,少加了{(lán)}
正確形式:
import { Encrypt } from "../plugins/encoder";總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 常規(guī)常用的JavaScript加密解密實(shí)例demo
- crypto-js對(duì)稱加密解密的使用方式詳解(vue與java端)
- 使用JS前端加密庫sm-crypto實(shí)現(xiàn)國密sm2、sm3和sm4加密與解密
- js前端加密庫Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
- JavaScript中常見加密解密方法總結(jié)
- JavaScript實(shí)現(xiàn)加密與解密詳解
- JavaScript實(shí)現(xiàn)的簡(jiǎn)單加密解密操作示例
- JavaScript插件為什么看不懂,使用了什么技術(shù)?(示例講解)
相關(guān)文章
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
在之前做個(gè)一個(gè)組件頁面中,引用了element-ui組件的日期選擇器,遇到的一個(gè)小問題,下面這篇文章主要給大家介紹了關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后時(shí)間的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例(附demo)
本文主要介紹了vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能
這篇文章主要為大家詳細(xì)介紹了使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Vue3中實(shí)現(xiàn)歌詞滾動(dòng)顯示效果
本文分享如何在Vue 3中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的歌詞滾動(dòng)效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
在操作數(shù)據(jù)的時(shí)候發(fā)現(xiàn),__ob__: Observer這個(gè)屬性出現(xiàn)之后,如果單獨(dú)拿數(shù)據(jù)的值,就會(huì)返回undefined,下面這篇文章主要給大家介紹了關(guān)于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下2022-11-11

