Angular编码哈希片段:如何防止它? [英] Angular encodes hash fragment: How to prevent it?

问题描述

我将Angular 5.2和Auth0一起使用进行身份验证.登录由Auth0在托管登录页面上完成.该页面将重定向到我的Angular应用程序中的回调页面myapp.com/login-callback.

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通过url中的哈希交出一些令牌.因此它重定向到

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

myapp.com/login-callback#access_token=123456789

myapp.com/login-callback#access_token=123456789

现在出现了问题..由于我将项目更改为Angular-CLI，并将其从5.1更新为5.2，因此Angular编码了哈希片段，因此它变成了

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

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

The =编码为％3D

The = is encoded to %3D

因此auth0解析功能不再起作用.

Therefore the auth0 parsing function doesn't work anymore.

如何防止Angular对网址的哈希片段进行编码?我使用默认的路由策略(按路径而不是按哈希).

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

推荐答案

我们只是遇到了与Auth0相同的问题，尽管它并没有禁用那个angular的功能"，您可以抓取该片段并将其传递给auth0的解析哈希函数.

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) => {
        // ...

这篇关于Angular编码哈希片段:如何防止它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！