ReactJS中URL ID掩码处理：防止用户篡改ID访问其他数据

针对你遇到的URL暴露ID导致用户可随意篡改访问数据的问题，以下是几种实用的解决思路，结合你的代码给出具体修改方案：

1. 使用自定义Slug替代ID（推荐） #

给每个资源分配一个唯一的、无意义的自定义字符串（slug），比如myID，将slug与真实ID的映射关系存储在数据库中。前端跳转时使用slug，后端通过slug查询对应的真实ID。

修改你的代码： #

假设你从接口获取到了对应tableNumber的tableSlug：

const { tableNumber } = useParams();
// 实际场景中从后端接口或状态中获取对应tableNumber的slug
const tableSlug = "myID";

<Link to={`/client/${tableSlug}`}>
  <Button className="botonHome" positive icon onClick={goToCart}>
    <Icon name="home" /> | Categorias
  </Button>
</Link>

后端处理：当请求/client/:slug时，根据slug查询数据库得到真实的tableNumber，再返回对应数据。这种方式用户无法通过猜测slug访问其他资源，安全性较高。

2. 通过React Router的state传递ID（不暴露在URL） #

利用React Router的state属性传递ID，URL中使用固定或自定义路径，不携带真实ID。

修改你的代码： #

const { tableNumber } = useParams();

<Link 
  to={{
    pathname: "/client/myID",
    state: { tableNumber: tableNumber }
  }}
>
  <Button className="botonHome" positive icon onClick={goToCart}>
    <Icon name="home" /> | Categorias
  </Button>
</Link>

目标组件接收ID：

import { useLocation } from 'react-router-dom';

const ClientPage = () => {
  const location = useLocation();
  const tableNumber = location.state?.tableNumber;
  
  // 后续使用tableNumber的业务逻辑
  return <div>...</div>;
};

注意：这种方式下页面刷新后state会丢失，可额外将ID存入sessionStorage，刷新时从中读取；该方案仅适合不需要分享URL的场景。

3. 对ID进行加密/掩码处理 #

将真实ID加密后放在URL中，后端接收后解密得到真实ID。注意不要使用base64（易解码），建议采用对称加密算法。

前端加密示例（需引入加密库，如crypto-js）： #

import CryptoJS from 'crypto-js';
const { tableNumber } = useParams();

// 加密ID（密钥需与后端一致，建议后端生成加密后的ID返回给前端，避免前端硬存敏感密钥）
const encryptedId = CryptoJS.AES.encrypt(
  tableNumber.toString(), 
  process.env.REACT_APP_ENCRYPT_KEY // 从环境变量读取密钥
).toString();

<Link to={`/client/${encryptedId}`}>
  <Button className="botonHome" positive icon onClick={goToCart}>
    <Icon name="home" /> | Categorias
  </Button>
</Link>

后端处理：接收encryptedId后，用相同密钥解密得到真实tableNumber，再返回对应数据。

关键提醒：后端权限校验是核心 #

无论采用哪种前端方案，后端必须添加权限校验逻辑：验证当前请求的用户是否有权限访问该tableNumber对应的数据。前端的隐藏/加密只是降低篡改风险，后端校验才是防止越权访问的根本。

内容的提问来源于stack exchange，提问作者francisco saraos