您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“axios請求響應(yīng)數(shù)據(jù)加解密封裝如何實現(xiàn)”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“axios請求響應(yīng)數(shù)據(jù)加解密封裝如何實現(xiàn)”吧!
在前端開發(fā)中,我們經(jīng)常需要向后端發(fā)送請求獲取數(shù)據(jù)。為了保證數(shù)據(jù)的安全性,在發(fā)送請求時需要對請求參數(shù)進行加密處理。本文將介紹如何使用Typescript、Axios封裝請求響應(yīng)數(shù)據(jù)加解密。
首先我們需要安裝以下依賴:
Axios:用于發(fā)送請求
crypto-js:用于加密請求參數(shù)
npm install axios crypto-js npm install axios
以下是一個基礎(chǔ)的Axios配置,使用Typescript和Axios進行封裝。它包括一個攔截器,用于在每個請求中添加一個通用的請求頭。您可以在這個基礎(chǔ)上擴展您的請求配置。
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實例,它有一個通用的請求頭Authorization
,值為your-token
。您可以根據(jù)自己的需要修改和擴展這個基礎(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ǔ)配置中添加錯誤處理邏輯、超時處理邏輯等等,以滿足您的具體需求。
單獨封裝出加密的方法,可以更加方便的調(diào)用,代碼如下:
import CryptoJS from 'crypto-js'; /** * 對數(shù)據(jù)進行加密處理 * @param data 需要加密的數(shù)據(jù) * @param key 加密密鑰 * @returns 加密后的字符串 */ export const encryptData = (data: any, key: string): string => { // 使用CryptoJS庫的AES加密方法對數(shù)據(jù)進行加密處理 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ù)進行加密,并返回加密后的字符串。
單獨封裝出解密的方法,可以更加方便的調(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ù)進行解密處理 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ù)進行加密處理。解密后臺返回的數(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ù)和返回數(shù)據(jù)進行了處理。在使用這些方法時,您需要提供加密密鑰,并根據(jù)需要傳遞請求參數(shù)。
對返回的數(shù)據(jù)檢測是否為空或無效。如果數(shù)據(jù)為空或無效,我們將拋出一個錯誤。然后使用AES解密方法對返回的數(shù)據(jù)進行解密。如果解密失敗,將拋出一個錯誤。然后,將解密后的數(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)用的時候都去傳參。
到此,相信大家對“axios請求響應(yīng)數(shù)據(jù)加解密封裝如何實現(xiàn)”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。