vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)
項(xiàng)目場(chǎng)景:
防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密。主要使用CryptoJS庫(kù)中的函數(shù)方法,加密:CryptoJS.AES.encrypt(), 解密:CryptoJS.AES.decrypt()。
代碼實(shí)現(xiàn)
- 安裝CryptoJS庫(kù):
npm install crypto-js
- 創(chuàng)建文件夾,@/utils/secret,引入CryptoJS庫(kù)并封裝加密解密函數(shù)方法:
import CryptoJS from 'crypto-js/crypto-js'; const key = CryptoJS.enc.Utf8.parse('123321'); // 密鑰 后端提供 const iv = CryptoJS.enc.Utf8.parse(''); // 偏移量 /** * AES加密 :字符串 key iv 返回base64 */ export function Encrypt(word) { const srcs = CryptoJS.enc.Utf8.parse(word); const encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); return CryptoJS.enc.Base64.stringify(encrypted.ciphertext); } /** * AES 解密 :字符串 key iv 返回base64 * */ export function Decrypt(word) { const base64 = CryptoJS.enc.Base64.parse(word); const src = CryptoJS.enc.Base64.stringify(base64); const decrypt = CryptoJS.AES.decrypt(src, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); return CryptoJS.enc.Utf8.stringify(decrypt); }
- 引入加密解密方法,對(duì)axios中封裝的request 請(qǐng)求前的統(tǒng)一處理做加密:
// 引入 import { Encrypt, Decrypt } from '/@/utils/secret'; this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => { // If cancel repeat request is turned on, then cancel repeat request is prohibited // @ts-ignore const { ignoreCancelToken } = config.requestOptions; const ignoreCancel = ignoreCancelToken !== undefined ? ignoreCancelToken : this.options.requestOptions?.ignoreCancelToken; !ignoreCancel && axiosCanceler.addPending(config); if (requestInterceptors && isFunction(requestInterceptors)) { config = requestInterceptors(config, this.options); } // 關(guān)鍵代碼: // JSON加密,formData不加密(對(duì)需要處理的數(shù)據(jù)格式做判斷) if (Object.prototype.toString.call(config.data) != '[object FormData]') { config.data = { encryptedData: Encrypt(JSON.stringify(config.data)) }; // 加密傳參,后端要求的傳參:encryptedData:加密參數(shù) } return config; }, undefined);
- response 響應(yīng)前的統(tǒng)一處理做解密:
this.axiosInstance.interceptors.response.use(async (res: AxiosResponse<any>) => { // 關(guān)鍵代碼: // 導(dǎo)出時(shí)數(shù)據(jù)格式為blob不解密(對(duì)需要處理的數(shù)據(jù)格式做判斷) if (Object.prototype.toString.call(res.data) != '[object Blob]') { res.data = JSON.parse(Decrypt(res.data)); // 解密返回參數(shù) } const config = res.config; if (res.data.code === 401) { // 如果未認(rèn)證,并且未進(jìn)行刷新令牌,說(shuō)明可能是訪問令牌過(guò)期了 if (!isRefreshToken) { isRefreshToken = true; // 1. 獲取到刷新token if (getRefreshToken()) { // 2. 進(jìn)行刷新訪問令牌 try { const refreshTokenRes = await this.refreshToken(); // 2.1 刷新成功,則回放隊(duì)列的請(qǐng)求 + 當(dāng)前請(qǐng)求 setToken('Bearer ' + refreshTokenRes.data.data.accessToken); (config as Recordable).headers.Authorization = getToken(); requestList.forEach((cb: any) => { cb(); }); requestList = []; return new Promise((resolve) => { resolve(this.axiosInstance(config)); }); // res = await Promise.all([this.axiosInstance(config)])[0] } catch (e) { requestList.forEach((cb: any) => { cb(); }); } finally { requestList = []; isRefreshToken = false; } } } else { // 添加到隊(duì)列,等待刷新獲取到新的令牌 return new Promise((resolve) => { requestList.push(() => { (config as Recordable).headers.Authorization = getToken(); // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改 resolve(this.axiosInstance(config)); }); }); } } res && axiosCanceler.removePending(res.config); if (responseInterceptors && isFunction(responseInterceptors)) { res = responseInterceptors(res); } return res; }, undefined);
最終效果
加密傳參:
后端返回參數(shù)加密:
在線加密解密工具:https://www.mklab.cn/utils/aes 或者 http://tools.jb51.net/password/aes_encode
總結(jié)
到此這篇關(guān)于vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3封裝AES加密解密通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined no-undef的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3中的element-plus表格實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue3中的element-plus表格實(shí)現(xiàn)代碼,用組件屬性實(shí)現(xiàn)跳轉(zhuǎn)路由,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05淺談vue在html中出現(xiàn){{}}的原因及解決方式
這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Vue前端如何實(shí)現(xiàn)生成PDF并下載功能詳解
在前端的崗位上經(jīng)常需要實(shí)現(xiàn)個(gè)生成個(gè)并下載的可視化圖表頁(yè)P(yáng)DF文件,這篇文章主要給大家介紹了關(guān)于Vue前端如何實(shí)現(xiàn)生成PDF并下載功能的相關(guān)資料,需要的朋友可以參考下2021-10-10vue打包后出現(xiàn)空白頁(yè)的原因及解決方式詳解
在項(xiàng)目中很多時(shí)候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來(lái)的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁(yè)的原因及解決方式的相關(guān)資料,需要的朋友可以參考下2022-07-07Vue使用Print.js打印div方式(選中區(qū)域的html)
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue項(xiàng)目的表單校驗(yàn)實(shí)戰(zhàn)指南
這篇文章主要介紹了Vue項(xiàng)目表單校驗(yàn)的相關(guān)資料,前端表單校驗(yàn)?zāi)軠p少無(wú)效請(qǐng)求,保護(hù)后端接口,使用ElementPlus表單組件進(jìn)行校驗(yàn),需要準(zhǔn)備表單對(duì)象、規(guī)則對(duì)象并進(jìn)行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下2024-10-10