Angular 4中含斜杠的URL令牌致跳转异常的解决方案咨询

这个问题的核心原因是Angular路由默认将URL中的斜杠/视为路由段的分隔符。当你的userIdCode参数包含斜杠时，路由会错误地将斜杠后的内容识别为新的路由片段，而你的配置中没有对应路由，因此触发了默认的首页重定向。

下面提供两种可行的解决方案，你可以根据实际场景选择：

方案一：对令牌进行URL编码/解码（推荐保持原路由结构） #

步骤1：后端生成邮箱链接时编码参数 #

在后端生成确认邮箱的URL时，将拼接后的userId|code字符串进行URL编码，把斜杠/转换为%2F、竖线|转换为%7C。例如，原本的123|abc/def会被编码为123%7Cabc%2Fdef，最终生成的URL为：
http://your-domain.com/confirm-email/123%7Cabc%2Fdef

步骤2：前端解码参数并处理 #

修改你的ConfirmEmailComponent代码，在获取路由参数后先进行URL解码，还原原始的令牌内容：

export class ConfirmEmailComponent implements OnInit {
  constructor(private route: ActivatedRoute, private signupService: SignUpService) {}
  private userId: any;
  private code: any;

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      // 解码URL参数，还原含斜杠的原始字符串
      const decodedParam = decodeURIComponent(params['userIdCode']);
      const splitted = decodedParam.split('|');
      this.userId = splitted[0];
      this.code = splitted[1];
      
      this.signupService.sendConfirmEmailData(this.userId, this.code).subscribe(
        result => console.log('确认成功:', result));
    });
  }
}

方案二：改用查询参数传递令牌（更简单，无需编码） #

如果不想处理编码逻辑，可以将userId和code拆分为查询参数传递，这样即使参数包含斜杠也不会干扰路由解析。

步骤1：修改路由配置 #

将路由改为不带参数的路径：

const routes: Routes = [{path: 'confirm-email', component: ConfirmEmailComponent}]
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

步骤2：后端生成带查询参数的链接 #

生成的邮箱确认URL格式改为：
http://your-domain.com/confirm-email?userId=123&code=abc/def

步骤3：前端获取查询参数 #

修改组件代码，通过queryParams获取参数：

export class ConfirmEmailComponent implements OnInit {
  constructor(private route: ActivatedRoute, private signupService: SignUpService) {}
  private userId: any;
  private code: any;

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.userId = params['userId'];
      this.code = params['code'];
      
      this.signupService.sendConfirmEmailData(this.userId, this.code).subscribe(
        result => console.log('确认成功:', result));
    });
  }
}

两种方案都能解决你的问题，方案一适合需要保持原有路由结构的场景，方案二更简洁，不需要额外处理编码逻辑。

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