使用router.query获取token时+字符被替换为空格的问题求助

问题原因 #

在HTTP标准的application/x-www-form-urlencoded编码规则里，+字符被定义为空格的替代表示。前端路由（比如Vue Router）在解析URL查询参数时，会默认遵循这个规则，自动把查询参数中的+替换成空格。你的Token里的+是有效字符，但被路由解析器误判为空格的编码形式，因此出现了替换异常。

解决方法 #

1. 后端编码Token（推荐）

最彻底的解决方式是后端在生成包含Token的URL时，先对Token进行URL编码：

• 后端用对应语言的URL编码方法（比如JavaScript的encodeURIComponent、Java的URLEncoder.encode等）处理Token，这样Token中的+会被转成%2B。
• 前端通过router.query.token或URLSearchParams.get('token')获取时，会自动将%2B还原为+，不会出现替换问题。

2. 前端手动还原Token（临时方案）

如果后端无法修改，前端可以绕过路由的自动解析，从原始URL中提取并修复Token：

• 方法一：使用URLSearchParams处理原始查询串

  // 直接从浏览器的原始查询字符串创建URLSearchParams实例
  const searchParams = new URLSearchParams(window.location.search);
  const token = searchParams.get('token');
  // 若后端已编码，这里会正确还原+；若未编码，需要结合方法二
  

• 方法二：从原始URL中截取并替换空格
  如果后端完全没对Token编码，URL中的+已被浏览器解析为空格，可直接从URL字符串中提取并还原：

  const tokenMatch = window.location.href.match(/token=([^&]+)/);
  if (tokenMatch) {
    // 先解码，再把所有空格替换回+
    const token = decodeURIComponent(tokenMatch[1]).replace(/\s/g, '+');
    // 此时token已恢复原始状态
  }
  

注意：你之前尝试的encodeURIComponent(String(router.query["token"]))无效，因为router.query中的+已经被替换成空格，编码空格只会得到%20，无法还原原始的+。

内容的提问来源于stack exchange，提问作者J. Petersen