React中如何为动态路由添加token实现URL产品信息隐藏？

下面是三种不同适用场景的实现方式：

1. 前后端映射token（最推荐，支持URL分享、刷新） #

• 后端给每个产品生成唯一无意义的随机串（比如UUID、16位随机字符串），和真实产品ID做一一映射存储，串内不包含任何产品ID、名称等敏感信息
• 前端商品列表请求接口时，后端直接返回这个随机串给前端用作跳转参数，跳转路径写为/products/${randomToken}
• 用户访问产品详情页时，前端将URL中的randomToken传给后端，后端通过映射关系查询到对应的真实产品ID，返回产品详情数据即可

额外安全优化：可给token配置过期时间、或者接口校验用户登录状态，避免恶意遍历爬取全量商品数据

2. React Router状态传参（适合不需要URL分享的场景） #

如果你的场景不需要支持用户复制URL分享、新窗口直接打开商品，可以用React Router自带的state传参，完全不在URL暴露任何产品信息：

• 列表页跳转代码示例：

import { useNavigate } from 'react-router-dom'

function ProductList() {
  const navigate = useNavigate()
  const handleProductClick = (productId) => {
    // 跳转时将产品ID存在state里，不带到URL
    navigate('/products/detail', { state: { productId } })
  }
  // 其余列表渲染逻辑
}

• 详情页取参代码示例：

import { useLocation, useEffect, useState } from 'react-router-dom'

function ProductDetail() {
  const location = useLocation()
  const [product, setProduct] = useState(null)
  const productId = location.state?.productId

  useEffect(() => {
    if (!productId) return
    // 拿productId请求产品详情接口
    fetch(`/api/product/${productId}`).then(res => res.json()).then(data => setProduct(data))
  }, [productId])
  // 其余详情渲染逻辑
}

• 这个方案下URL统一为/products/detail，完全没有产品相关信息，缺点是刷新页面后state会丢失，无法直接通过URL访问对应商品

3. 前端对称加密（仅学习场景临时使用，安全性低） #

如果暂时不想改后端逻辑，可以前端用对称加密算法（比如AES）加密产品ID，将加密后的字符串放在URL中，详情页拿到加密串后解密得到真实ID再请求接口。这个方案安全性较差，加密规则泄露后即可还原所有产品ID，仅适合个人学习项目临时使用。

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