Angular中如何读取URI片段#id_token？组件未触发初始化问题

一、先排查组件未初始化（无控制台日志）的问题 #

组件没触发初始化，大概率是路由未正确匹配或组件无法渲染，按以下步骤检查：

• 确认AppModule中已导入RouterModule.forRoot(routes)，且路由配置数组正确包含signup-callback的路由项
• 检查路由顺序：如果有{ path: 'api/v1', ... }这类前缀匹配路由排在signup-callback路由前面，会优先匹配导致当前路由失效，需将signup-callback路由移至这类前缀路由之前
• 确认AppComponent模板中存在<router-outlet>标签，缺少该标签Angular无法渲染路由对应的组件

二、读取URI片段中的id_token #

组件正常初始化后，可通过两种方式获取哈希片段里的id_token：

方式1：使用Angular的ActivatedRoute（推荐，符合路由规范） #

修改组件代码，注入ActivatedRoute获取路由片段：

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

@Component({
  selector: 'app-user-signup-callback',
  templateUrl: './user-signup-callback.component.html',
  styleUrls: ['./user-signup-callback.component.css']
})
export class UserSignupCallbackComponent implements OnInit{
  constructor(
    private activatedRoute: ActivatedRoute
  ){}

  ngOnInit(): void {
    console.log('Initiated UserSignupCallbackComponent!');
    // 场景1：组件初始化时片段不会变化，直接用snapshot获取
    const fragment = this.activatedRoute.snapshot.fragment;
    if (fragment) {
      const idToken = this.extractIdToken(fragment);
      console.log('id_token:', idToken);
    }

    // 场景2：组件生命周期内片段可能更新，订阅片段变化
    this.activatedRoute.fragment.subscribe(fragment => {
      if (fragment) {
        const idToken = this.extractIdToken(fragment);
        console.log('id_token:', idToken);
      }
    });
  }

  // 从片段字符串中提取id_token
  private extractIdToken(fragment: string): string | null {
    const params = new URLSearchParams(fragment);
    return params.get('id_token');
  }
}

方式2：直接操作window.location（简单直接） #

若无需遵循Angular路由规范，可直接读取浏览器location对象：

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

@Component({
  selector: 'app-user-signup-callback',
  templateUrl: './user-signup-callback.component.html',
  styleUrls: ['./user-signup-callback.component.css']
})
export class UserSignupCallbackComponent implements OnInit{
  ngOnInit(): void {
    console.log('Initiated UserSignupCallbackComponent!');
    const hash = window.location.hash.slice(1); // 移除开头的#
    const params = new URLSearchParams(hash);
    const idToken = params.get('id_token');
    console.log('id_token:', idToken);
  }
}

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