路由和 URL 处理 Angular答案

【问题标题】：Routing and URL handling Angular路由和 URL 处理 Angular
【发布时间】：2019-04-24 13:20:18
【问题描述】：

一如既往，在注册后台后给我发送一个 URL 以确认帐户。我得到了完整的网址： https://app.com/confirm/{userName}/{token}

用户名和令牌是我需要处理并发送回请求的数据。问题是我不知道如何处理它。当我进行路由时：

/confirm/:userName/:token

这是错误的，因为令牌得到了未知数量的 /（斜杠），所以路由认为这是它的路径。我该如何解决这个问题？我尝试使用 RouterActivated 和 RouterActivatedSnapshot。我得到了带有重定向到错误页面的**，所以当我按照上面的方式进行操作时，它总是会转到错误页面。有什么建议吗？

【问题讨论】：

您应该在将令牌添加到 URL 之前对令牌进行 URL 编码
在后端他们需要编码，然后我将其作为参数捕获并解码？还有其他方法吗？我从上面的后端 url 得到，我需要在明天之前做，所以我会感激任何其他解决方案。

标签： angular routing angular6

【解决方案1】：

你可以尝试使用自定义UrlMatcher：

...
const appRoutes: Routes = [
  {
    matcher: tokenMatcher,
    component: TestComponent
  }
];
...

/**
 * custom url matcher for router config
 */
export function tokenMatcher(url: UrlSegment[]) {

  if (url.length > 2 && url[0].path === 'confirm') {
    return {
      consumed: url,
      posParams: {
        userName: url[1],
        token: new UrlSegment(url.slice(2).map(u => u.path).join('/'), {})
      }
    }
  }

  return null;
}

STACKBLITZ

【讨论】：

【解决方案2】：

在我看来你应该：

在添加到电子邮件之前对 url 进行编码
将令牌作为查询参数传递 - 因为令牌可能很长

【讨论】：