Angular 编码散列片段：如何防止它？答案

【问题标题】：Angular encodes hash fragment: How to prevent it?Angular 编码散列片段：如何防止它？
【发布时间】：2018-03-08 20:43:52
【问题描述】：

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

Auth0 通过 url 中的哈希传递一些令牌。所以它重定向到

myapp.com/login-callback#access_token=123456789

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

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

= 被编码为 %3D

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

如何防止 Angular 对 url 的哈希片段进行编码？我使用默认路由策略（通过路径，而不是通过哈希）。

【问题讨论】：

标签： angular

【解决方案1】：

我们刚刚使用 Auth0 遇到了同样的问题，虽然它不会禁用 angular 的“功能”，但您可以抓取片段并将其传递给 auth0 的解析哈希函数。

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】：

默认情况下，Angular 使用 encodeURIComponent() 对您的 URL 进行编码，但您可以通过编写自定义 URI 序列化程序来覆盖它。

检查这个答案：angular 2 disable url encoding

基本上，您使用自己的自定义覆盖 UriSeriaizer。

【讨论】：