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è)參考,也希望大家多多支持腳本之家。
- js前端加密庫Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
- JavaScript實(shí)現(xiàn)的前端AES加密解密功能【基于CryptoJS】
- JS使用插件cryptojs進(jìn)行加密解密數(shù)據(jù)實(shí)例
- VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密的方法示例
- 使用JS前端加密庫sm-crypto實(shí)現(xiàn)國(guó)密sm2、sm3和sm4加密與解密
- 前端CryptoJS加密、后端JAVA解密代碼實(shí)現(xiàn)參考
- JS使用 cryptojs加密解密(對(duì)稱加密庫)的問題
- vue項(xiàng)目之前端CryptoJS加密、解密代碼示例
- vue用CryptoJS加密,java用CryptoUtil解密
- crypto-js對(duì)稱加密解密的使用方式詳解(vue與java端)
相關(guān)文章
vue.js?自定義指令(拖拽、拖動(dòng)、移動(dòng))?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令(拖拽、拖動(dòng)、移動(dòng))?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯(cuò)位問題
這篇文章主要介紹了如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯(cuò)位問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05vue?如何刪除數(shù)組中的某一條數(shù)據(jù)
這篇文章主要介紹了vue?如何刪除數(shù)組中的某一條數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08使用FileReader API創(chuàng)建Vue文件閱讀器組件
這篇文章主要介紹了使用FileReader API創(chuàng)建一個(gè)Vue的文件閱讀器組件,需要的朋友可以參考下2018-04-04基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件
本文給大家介紹基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件,此篇教程需要大家具備一定的css和vue基礎(chǔ)知識(shí),本文分步驟給大家介紹的非常詳細(xì),需要的朋友參考下吧2017-11-11vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10