TanStack Router中Base64搜索参数序列化的潜在问题与解决方案

在TanStack Router项目中，使用Base64进行搜索参数序列化时可能会遇到一个隐藏问题。当用户提交的字符串恰好是Base64编码的有效数组时，系统会错误地将其解码为数组而非保留原始字符串值。

问题现象

假设我们有以下场景：

• 路由配置了两个参数：string（字符串类型）和array（数组类型）
• 用户提交了一个数组，系统将其序列化为Base64字符串（如WyIxIiwiMiJd）
• 当其他用户尝试搜索这个Base64字符串时，系统会错误地将其解码回数组

根本原因

问题出在当前的序列化/反序列化实现方式上。现有的Base64转换函数没有区分原始数据类型，导致任何符合Base64编码格式的字符串都可能被错误解析。

解决方案

可以通过修改序列化函数来避免这个问题：

stringifySearch: stringifySearchWith(
  (value) => encodeToBinary(encodeURIComponent(JSON.stringify(value))),
  (value) => JSON.parse(decodeURIComponent(decodeFromBinary(value)))
)

这个改进方案添加了额外的URI编码/解码层，确保：

1. 序列化时先进行JSON字符串化
2. 然后进行URI编码
3. 最后进行Base64编码
4. 反序列化时逆向操作

注意事项

1. 数字处理：这种方案会将数字1转换为字符串"1"，需要额外处理类型转换
2. 性能影响：额外的编码/解码步骤会带来轻微的性能开销
3. 兼容性：修改后需要确保所有客户端使用相同的序列化方式

最佳实践建议

1. 对于关键参数，考虑使用类型前缀标识（如"str:"或"arr:"）
2. 实现自定义类型守卫来确保参数类型正确
3. 在文档中明确说明参数序列化规则
4. 考虑使用更健壮的序列化方案如MessagePack

这个问题的解决展示了在Web路由设计中类型安全的重要性，特别是在处理用户输入时需要考虑各种边界情况。开发者在使用自定义序列化方案时应当充分测试各种可能的输入场景。