Angular encodes hash fragment: How to prevent it?

问题

I'm using Angular 5.2 with Auth0 for authentication. The login is done on a hosted login page by Auth0. That page redirects to my callback page myapp.com/login-callback in my Angular app.

Auth0 hands over some tokens via the hash in the url. So it redirects to

myapp.com/login-callback#access_token=123456789

Now comes the problem.. Since I changed my project to Angular-CLI and updated it from 5.1 to 5.2 Angular encodes the hash fragment, so that it becomes

myapp.com/login-callback#access_token%3D123456789

The = is encoded to %3D

Therefore the auth0 parsing function doesn't work anymore.

How can I prevent Angular from encoding the hash fragment of the url? I use the default routing strategy (by path, not by hash).

回答1:

We just ran into the same thing with Auth0, while it doesn't disable that "feature" of angular you can grab the fragment and pass it into auth0's parse hash function.

import { ActivatedRoute } from '@angular/router';
import { WebAuth } from 'auth0-js';

//...
  constructor(private route: ActivatedRoute, private auth0: WebAuth) {}

  public handleAuth() {
    //...
    this.route.fragment.subscribe((hash) => {
      // hash is decoded at this point

      this.auth0.parseHash({hash}, (e, data) => {
        // ...

回答2:

Well Angular by default encodes your URL with encodeURIComponent(), but you can override it by writing a custom URI serializer.

Check this answer: angular 2 disable url encoding

Basically, you overwrite UriSeriaizer with your own custom one.

来源：https://stackoverflow.com/questions/49182111/angular-encodes-hash-fragment-how-to-prevent-it

标签

angular