axios請求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解
安裝依賴
在前端開發(fā)中，我們經(jīng)常需要向后端發(fā)送請求獲取數(shù)據(jù)。為了保證數(shù)據(jù)的安全性，在發(fā)送請求時需要對請求參數(shù)進(jìn)行加密處理。本文將介紹如何使用Typescript、Axios封裝請求響應(yīng)數(shù)據(jù)加解密。
首先我們需要安裝以下依賴：
- Axios：用于發(fā)送請求
- crypto-js：用于加密請求參數(shù)
npm install axios crypto-js npm install axios
封裝基礎(chǔ)axios
以下是一個基礎(chǔ)的Axios配置，使用Typescript和Axios進(jìn)行封裝。它包括一個攔截器，用于在每個請求中添加一個通用的請求頭。您可以在這個基礎(chǔ)上擴(kuò)展您的請求配置。
import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
const axiosInstance: AxiosInstance = axios.create({
baseURL: '<http://example.com/api>',
timeout: 10000,
withCredentials: true, // 允許攜帶cookie
});
axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
config.headers.common['Authorization'] = 'your-token';
return config;
});
export default axiosInstance;
在這個示例中，我們創(chuàng)建了一個名為axiosInstance的Axios實(shí)例，它有一個通用的請求頭Authorization，值為your-token。您可以根據(jù)自己的需要修改和擴(kuò)展這個基礎(chǔ)配置。
例如，您可以添加一個攔截器，用于在每個請求中添加一個時間戳，以確保請求不會被緩存：
axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
config.headers.common['Authorization'] = 'your-token';
config.headers.common['Cache-Control'] = 'no-cache';
config.headers.common['Pragma'] = 'no-cache';
config.headers.common['Expires'] = '0';
config.params = {
...config.params,
timestamp: new Date().getTime(),
};
return config;
});
除此之外，您還可以在這個基礎(chǔ)配置中添加錯誤處理邏輯、超時處理邏輯等等，以滿足您的具體需求。
封裝加密方法
單獨(dú)封裝出加密的方法，可以更加方便的調(diào)用，代碼如下：
import CryptoJS from 'crypto-js';
/**
* 對數(shù)據(jù)進(jìn)行加密處理
* @param data 需要加密的數(shù)據(jù)
* @param key 加密密鑰
* @returns 加密后的字符串
*/
export const encryptData = (data: any, key: string): string => {
// 使用CryptoJS庫的AES加密方法對數(shù)據(jù)進(jìn)行加密處理
const ciphertext = CryptoJS.AES.encrypt(
JSON.stringify(data),
CryptoJS.enc.Utf8.parse(key),
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
}
);
// 將加密后的結(jié)果轉(zhuǎn)換為字符串，并返回
return ciphertext.toString();
}
這個方法接收兩個參數(shù)：需要加密的數(shù)據(jù)以及加密密鑰。它使用AES算法對數(shù)據(jù)進(jìn)行加密，并返回加密后的字符串。
封裝解密方法
單獨(dú)封裝出解密的方法，可以更加方便的調(diào)用，代碼如下：
import CryptoJS from 'crypto-js';
/**
* 解密數(shù)據(jù)
* @param ciphertext 密文
* @param key 解密密鑰
* @returns 解密后的數(shù)據(jù)
*/
export const decryptData = <T>(ciphertext: string, key: string): T => {
let decryptedData;
try {
// 使用CryptoJS庫的AES解密方法對數(shù)據(jù)進(jìn)行解密處理
const decryptedBytes = CryptoJS.AES.decrypt(
ciphertext,
CryptoJS.enc.Utf8.parse(key),
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
}
);
// 將解密后的結(jié)果轉(zhuǎn)換為字符串，并解析為JSON對象
const decryptedString = decryptedBytes.toString(CryptoJS.enc.Utf8);
decryptedData = JSON.parse(decryptedString);
} catch (error) {
// 如果解密失敗，拋出一個錯誤
throw new Error('Failed to decrypt data: ' + error.message);
}
// 返回解密后的數(shù)據(jù)
return decryptedData as T;
}
在decryptData函數(shù)上添加一個泛型<T>，表示期望的解密后的數(shù)據(jù)的類型。在函數(shù)的返回語句中，將返回值轉(zhuǎn)換為T類型。在使用decryptData函數(shù)時，需要顯式指定期望的返回類型，例如：const decryptedData: MyData = decryptData<MyData>(ciphertext, key);。
封裝請求方法
接下來封裝一個請求方法，使用Axios發(fā)送請求并在發(fā)送請求之前對請求參數(shù)進(jìn)行加密處理。解密后臺返回的數(shù)據(jù)使用了與加密方法相同的密鑰，將返回的密文數(shù)據(jù)存儲在res.data中。然后，使用CryptoJS庫的AES解密方法將密文數(shù)據(jù)解密為字符串，并將其解析為JSON對象。代碼如下：
import axios, { AxiosResponse, AxiosError } from 'axios';
import CryptoJS from 'crypto-js';
/**
* 發(fā)起加密GET請求
* @param url 請求地址
* @param params 請求參數(shù)
* @param key 加密密鑰
* @returns 返回解密后的JSON對象
*/
export const requestGet = async <T>(url: string, params: any, key: string): Promise<T> => {
const encryptedParams = encryptData(params, key);
try {
const res = await axios.get(url, {
params: {
data: encryptedParams,
},
});
if (!res.data) {
throw new Error('Response data is empty.');
}
return decryptData<T>(res.data, key);
} catch (error) {
throw new Error('Failed to send request: ' + error.message);
}
};
/**
* 發(fā)起加密POST請求
* @param url 請求地址
* @param data 請求參數(shù)
* @param key 加密密鑰
* @returns 返回解密后的JSON對象
*/
export const requestPost = async <T>(url: string, data: any, key: string): Promise<T> => {
const encryptedData = encryptData(data, key);
try {
const res = await axios.post(url, {
data: encryptedData,
});
if (!res.data) {
throw new Error('Response data is empty.');
}
return decryptData<T>(res.data, key);
} catch (error) {
throw new Error('Failed to send request: ' + error.message);
}
};
將requestGet和requestPost方法的返回類型定義為Promise<T>，其中T是解密后的數(shù)據(jù)類型。在調(diào)用這些方法時顯式指定解密后的數(shù)據(jù)類型，例如const res = await requestGet<MyData>('<http://example.com/api/data>', params, 'my-secret-key');。
requestGet方法封裝了一個GET請求，requestPost方法封裝了一個POST請求。使用了CryptoJS庫的AES加密和解密方法對請求參數(shù)和返回?cái)?shù)據(jù)進(jìn)行了處理。在使用這些方法時，您需要提供加密密鑰，并根據(jù)需要傳遞請求參數(shù)。
對返回的數(shù)據(jù)檢測是否為空或無效。如果數(shù)據(jù)為空或無效，我們將拋出一個錯誤。然后使用AES解密方法對返回的數(shù)據(jù)進(jìn)行解密。如果解密失敗，將拋出一個錯誤。然后，將解密后的數(shù)據(jù)解析為JSON對象。如果解析失敗，將拋出一個錯誤。最后，將解密后的JSON對象返回給調(diào)用方。
使用封裝方法
在React組件中使用我們封裝的請求方法了。代碼如下：
import { request } from './request';
const App = () => {
const handleGetData = async () => {
try {
const res = await requestPost('<http://example.com/api/data>', {
username: 'user',
password: 'pass',
}, 'my-secret-key');
console.log(res.data);
} catch (error) {
console.error(error);
}
};
return (
<button onClick={handleGetData}>Get Data</button>
);
}
上述代碼中，調(diào)用requestPost方法發(fā)送一個POST請求，請求參數(shù)為{ username: 'user', password: 'pass' }。傳遞的加密密鑰為my-secret-key。在請求成功后，控制臺將輸出返回的數(shù)據(jù)。對于這個加密秘鑰可以統(tǒng)一封裝好，可以不用每次調(diào)用的時候都去傳參。
結(jié)尾
本文寫了如何在前端開發(fā)中，使用Typescript、Axios封裝一個請求加密方法。
首先，我們安裝了必要的依賴：Axios和crypto-js。然后，我們封裝了一個基礎(chǔ)的Axios配置，并添加了一個攔截器，用于在每個請求中添加一個通用的請求頭。接下來，我們封裝了加密和解密方法，使用AES算法對請求參數(shù)和返回?cái)?shù)據(jù)進(jìn)行加密和解密處理。最后，我們封裝了一個請求方法，該方法使用Axios發(fā)送請求并在發(fā)送請求之前對請求參數(shù)進(jìn)行加密處理。在請求成功后，使用CryptoJS庫的AES解密方法將返回的密文數(shù)據(jù)解密為字符串，并將其解析為JSON對象。
如果您需要在前端開發(fā)中發(fā)送請求并保護(hù)數(shù)據(jù)的安全性，可以參考使用本文的方法進(jìn)行加密和解密處理。
以上就是axios請求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于封裝axios請求響應(yīng)數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react18中react-redux狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了react18中react-redux狀態(tài)管理的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React報(bào)錯Too many re-renders解決
這篇文章主要為大家介紹了React報(bào)錯Too many re-renders解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
一文詳解React Redux設(shè)計(jì)思想與工作原理
最近看項(xiàng)目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計(jì)思想與工作原理,所以本文詳細(xì)的給大家介紹了Redux設(shè)計(jì)思想與工作原理,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了React中嵌套組件與被嵌套組件的通信過程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
React知識中一個主要內(nèi)容便是組件之間的通信，以下列舉幾種常用的組件通信方式，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了React的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React從react-router路由上做登陸驗(yàn)證控制的方法
本篇文章主要介紹了React從react-router路由上做登陸驗(yàn)證控制的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
React渲染機(jī)制及相關(guān)優(yōu)化方案
這篇文章主要介紹了react中的渲染機(jī)制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機(jī)制以及產(chǎn)生作用的機(jī)會，簡單模擬實(shí)現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級的思路進(jìn)行項(xiàng)目優(yōu)化的兩個hooks，感興趣的小伙伴跟著小編一起來看看吧2023-07-07
React中常見的TypeScript定義實(shí)戰(zhàn)教程
這篇文章主要介紹了React中常見的TypeScript定義實(shí)戰(zhàn),本文介紹了Fiber結(jié)構(gòu)，F(xiàn)iber的生成過程，調(diào)和過程，以及 render 和 commit 兩大階段，需要的朋友可以參考下2022-10-10
React手寫簽名組件react-signature實(shí)現(xiàn)簽字demo
這篇文章主要為大家介紹了React手寫簽名組件react-signature實(shí)現(xiàn)簽字demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12