Routing and URL handling Angular

Question

as it always is, after registration backend send me a url to confirm account. I got full url: https://app.com/confirm/ {userName}/{token}

Username and token are data that I need to handle and send in back request. The thing is I don't know how to handle it. When I make routing:

/confirm/:userName/:token

It's wrong because token got unknown number of / (slashes) so routing think that this is the path for it. How can I resolve that problem? I tried with RouterActivated and RouterActivatedSnapshot. I got ** with redirect to error page so when I do it as above, it always go to error page. Any suggestions?

Answer 1

In my opinion you should:

1. Encode url before adding it to email
2. Pass token as query param - because token may be very long

Answer 2

You can try to use custom 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