Angular 5.2编码URL哈希片段问题：如何阻止该行为？

我之前也碰到过一模一样的情况，Angular 5.2在HashLocationStrategy的处理逻辑上做了调整，会自动对哈希里的特殊字符（比如=）进行URL编码，这就导致Auth0传过来的access_token=123456789变成了access_token%3D123456789，直接打断了令牌的正常解析。下面给你几个实用的解决方案：

方案一：在回调组件中手动解码哈希片段 #

这是最直接的临时修复方式，在login-callback组件里手动获取并解码完整的哈希字符串，再提取需要的令牌信息：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login-callback',
  templateUrl: './login-callback.component.html'
})
export class LoginCallbackComponent implements OnInit {

  ngOnInit() {
    // 获取浏览器地址栏的原始哈希并解码
    const decodedHash = decodeURIComponent(window.location.hash);
    // 去掉哈希开头的#，用URLSearchParams解析参数
    const params = new URLSearchParams(decodedHash.slice(1));
    // 提取Auth0返回的令牌
    const accessToken = params.get('access_token');
    const idToken = params.get('id_token');
    
    // 后续处理：比如传入Auth0服务、存入本地存储等
    console.log('解析到的Access Token:', accessToken);
  }
}

方案二：自定义HashLocationStrategy从根源解决 #

如果希望彻底规避编码冲突，可以自定义一个哈希路由策略，覆盖Angular默认的编码逻辑，只对普通路由编码，放过Auth0的令牌参数：

1. 创建自定义策略文件custom-hash-location-strategy.ts：

import { HashLocationStrategy } from '@angular/common';

export class CustomHashLocationStrategy extends HashLocationStrategy {
  prepareExternalUrl(internalUrl: string): string {
    // 判断是否是Auth0回调的令牌参数路由，跳过编码
    if (internalUrl.includes('access_token') || internalUrl.includes('id_token')) {
      return '#' + internalUrl;
    }
    // 其他正常路由使用默认编码逻辑
    return super.prepareExternalUrl(internalUrl);
  }
}

2. 在app.module.ts中替换默认的路由策略：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy } from '@angular/common';
import { CustomHashLocationStrategy } from './custom-hash-location-strategy';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    { provide: LocationStrategy, useClass: CustomHashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案三：检查Auth0 SDK版本（可选） #

如果你用的是Auth0官方的Angular SDK，建议确认一下SDK版本是否兼容Angular 5.2，有时候升级SDK就能自动适配这种编码逻辑的变化。

内容的提问来源于stack exchange，提问作者user3745073