React中对象数据的加密解密及属性合并与拆分实现方案

Got it, let's walk through exactly how to handle this in React—from merging your properties, encrypting the data, to decrypting and splitting it back on the receiver's end. I'll cover both a simple approach and a more robust option for sensitive data!

First, we'll combine the name and message fields into your desired string format, then encrypt the result before sending.

Step 1: Merge the Properties #

Create a helper function to format name and message into the string structure you want:

const mergeUserData = (user) => {
  // Follow your specified format: "name&&message:messageContent"
  return `${user.name}&&message:${user.message}`;
};

Step 2: Encrypt the Merged Data #

For simple scenarios, you can use Base64 encoding (note: this is not true encryption, just obfuscation). For sensitive data, use a proper encryption library like crypto-js for AES encryption.

Option A: Simple Base64 Encoding

// Encrypt (encode) function
const encryptData = (data) => {
  return btoa(unescape(encodeURIComponent(data)));
};

// Put it all together
const originalUser = { to: 1235, name: "fox", message: "Hi" };
const mergedString = mergeUserData(originalUser);
const encryptedString = encryptData(mergedString);

// Final object to send
const userToSend = {
  to: originalUser.to,
  data: encryptedString
};
// Output: { to: 1235, data: "Zm94JiZtZXNzYWdlOmhp" }

Option B: Secure AES Encryption (For Sensitive Data)

First install the library:

npm install crypto-js

Then implement encryption:

import CryptoJS from 'crypto-js';

// Shared secret key (keep this secure and consistent between sender/receiver)
const SECRET_KEY = 'your-strong-unique-secret-key';

const encryptData = (data) => {
  return CryptoJS.AES.encrypt(data, SECRET_KEY).toString();
};

// Usage is the same as above—merge first, then encrypt
const mergedString = mergeUserData(originalUser);
const encryptedString = encryptData(mergedString);
const userToSend = { to: originalUser.to, data: encryptedString };

On receiving the data, we'll first decrypt it, then split the string back into name and message fields.

Step 1: Decrypt the Data #

Match the decryption method to the encryption method used:

Option A: Base64 Decoding

const decryptData = (encryptedData) => {
  return decodeURIComponent(escape(atob(encryptedData)));
};

Option B: AES Decryption

import CryptoJS from 'crypto-js';

const SECRET_KEY = 'your-strong-unique-secret-key'; // Same as sender

const decryptData = (encryptedData) => {
  const decryptedBytes = CryptoJS.AES.decrypt(encryptedData, SECRET_KEY);
  return decryptedBytes.toString(CryptoJS.enc.Utf8);
};

Step 2: Split the Decrypted String #

Create a helper function to parse the merged string back into individual properties:

const splitUserData = (decryptedString) => {
  // Split the string at "&&message:" to separate name and message
  const [name, message] = decryptedString.split('&&message:');
  return { name, message };
};

// Put it all together to restore the original object
const receivedUser = { to: 1235, data: "Zm94JiZtZXNzYWdlOmhp" }; // Or AES encrypted string
const decryptedString = decryptData(receivedUser.data);
const { name, message } = splitUserData(decryptedString);

const restoredUser = {
  to: receivedUser.to,
  name,
  message
};
// Output: { to: 1235, name: "fox", message: "Hi" }

If name or message might contain the string &&message: (unlikely but possible), use JSON serialization instead—it's more reliable:

// Sender: Merge using JSON
const mergeUserData = (user) => {
  return JSON.stringify({ name: user.name, message: user.message });
};

// Receiver: Split using JSON parse
const splitUserData = (decryptedString) => {
  return JSON.parse(decryptedString);
};

This way, even special characters won't break the splitting logic.

内容的提问来源于stack exchange，提问作者Puneet Biswas