How to handle parameters beginning with # in angular 6 routing

Question

I have an angular 6 application. I’m trying to get an access token from an oauth2 provider. I successfully get the token but I’m not able to load my callback page. The problem seems to be that the token is attached to the callback url with a # and my angular router doesn’t like #.

Here is an example of the callback url with the token:

http://localhost:4200/oauth2-callback/#access_token=***&token_type=Bearer&expires_in=31622400

Here is my route configuration:

  {
    path: 'oauth2-callback/:token',
    component: Oauth2CallbackComponent,
    canActivate: [AuthGuard]
  }

I tested this out by manually going to http://localhost:4200/oauth2-callback/xyz. <— This works fine. But then I try with: http://localgost:4200/oauth2-callback/#xyz. <— This redirects me to our error page.

So my question is: how can I configure my routing to handle parameters beginning with #?

Thanks.

Possible duplicate of [How to handle hash fragments from oauth redirect urls in Angular2 rc3 routing](https://stackoverflow.com/questions/38255939/how-to-handle-hash-fragments-from-oauth-redirect-urls-in-angular2-rc3-routing) — Smokey Dawson, Apr 09 '19 at 23:26
Possible duplicate of [Retrieve hash fragment from url with Angular2](https://stackoverflow.com/questions/36665234/retrieve-hash-fragment-from-url-with-angular2) — hlg, Apr 10 '19 at 01:39
Neither of those are solutions in my case. The first one say "Essentially I updated the redirect url when registering my application with doorkeeper/oauth2 to be http://localhost:4200/login/ (which leads the redirect url containing the token to look like http://localhost:4200/login/#access_token=TOKEN)" which is exactly what I'm doing but doesn't work (she mentions Angular 2, with an update to 4. I'm using 6). The second one is about how to get fragments from the url, but I can't even get to the point where I can do that since I'm being redirected before any code in the component can run. — Gibran Shah, Apr 10 '19 at 16:05

score 0 · Answer 1 · answered Apr 11 '19 at 16:26

I have to confess the fault was mine. I had a typo in my redirect: oath2-callback ( <-- missing the u). That in combination with getting rid of the / (so it's http://localhost:4200/oauth2-callback#access_token=... instead of http://localhost:4200/oauth2-callback/#accesstoken=...) solved the problem.

How to handle parameters beginning with # in angular 6 routing

1 Answers1