.NET与Angular场景下如何还原浏览器中被转义的原始URL？

问题原因 #

原始密码重置链接里的Token包含+字符，而URL规范中+等价于空格。邮件客户端或浏览器解析链接时，会把Token里的+自动转译为空格（URL编码后为%20），导致发送回.NET服务器的Token与原始生成的Token不一致，触发无效Token提示。

解决方案 #

可以从前端处理还原Token、后端生成链接时提前编码、后端接收时修正Token三个角度解决：

1. 前端（Angular）还原Token

从URL获取Token后，将所有%20替换回原始的+：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    let token = params['token'];
    // 替换%20为+，还原原始Token
    token = token.replace(/%20/g, '+');
    const email = params['email'];
    
    // 将还原后的Token和Email发送至服务器
    this.resetPasswordService.submitReset(token, email).subscribe(...);
  });
}

2. 后端（.NET）生成链接时正确编码Token

生成邮件链接前，对Token和Email进行URL编码，让+被转译为%2B（而非保留+），避免浏览器误解析：

using System.Web;

// 假设已生成重置Token和用户邮箱
string resetToken = "CfDJ8CxI+mZH0PVCrCj+yRmAz1NnYqrnzqvWIEfniK4idk35lgcE86ZLSsP8BiPKyIcre9Kgp4U1T5JXvIsgQnuvZKrtHIpwUapHVpjZYqouPQodxS3K+NuzGY0dCLVo9yyoEnQMQItSaMImfbg1YxQy4ZVLyF16uo+SEK7cFr3VNU6ObW3ALtwaOMRtw6gN0JlQBxPC15nUVXnKKvNEKucSxrJrB9C+fM6eu+nMfHfY3JFf";
string userEmail = "adnen@gmail.com";

// 对Token和Email进行URL编码
string encodedToken = HttpUtility.UrlEncode(resetToken);
string encodedEmail = HttpUtility.UrlEncode(userEmail);

// 构建正确的重置链接
string resetUrl = $"https://localhost:4200/resetPassword?token={encodedToken}&email={encodedEmail}";

3. 后端（.NET）接收时修正Token

如果无法修改前端或链接生成逻辑，可在后端接收Token后，将解码后的空格替换回+：

[HttpPost("resetPassword")]
public IActionResult ResetPassword([FromQuery] string token, [FromQuery] string email)
{
    // 将空格替换为+，还原原始Token
    token = token.Replace(" ", "+");
    
    // 执行Token验证与密码重置逻辑
    var isValid = _resetTokenService.ValidateToken(token, email);
    if (isValid)
    {
        // 重置密码操作
        return Ok("密码重置成功");
    }
    return BadRequest("无效的重置Token");
}

内容的提问来源于stack exchange，提问作者adnen ben awicha