如何在Angular 2中为openid令牌保留我的散列片段

在Angular 2中为openid令牌保留散列片段，可以通过以下步骤实现：

首先，确保你已经安装了Angular CLI，并创建了一个新的Angular项目。
在Angular项目的根目录下，打开src/app文件夹，创建一个新的文件夹，命名为auth。
在auth文件夹中，创建一个新的服务文件，命名为auth.service.ts，并在其中编写以下代码：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private fragment: string;

  constructor(private router: Router) {
    this.fragment = '';
  }

  setFragment(fragment: string): void {
    this.fragment = fragment;
  }

  getFragment(): string {
    return this.fragment;
  }

  redirectToFragment(): void {
    const url = this.router.serializeUrl(this.router.createUrlTree([], { fragment: this.fragment }));
    window.location.href = url;
  }
}

在auth文件夹中，创建一个新的组件文件，命名为callback.component.ts，并在其中编写以下代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-callback',
  template: '<div>Loading...</div>'
})
export class CallbackComponent implements OnInit {
  constructor(private route: ActivatedRoute, private authService: AuthService) {}

  ngOnInit(): void {
    this.route.fragment.subscribe(fragment => {
      this.authService.setFragment(fragment);
      this.authService.redirectToFragment();
    });
  }
}

在app.module.ts文件中，将AuthService和CallbackComponent添加到providers和declarations数组中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { AuthService } from './auth/auth.service';
import { CallbackComponent } from './auth/callback.component';

const routes: Routes = [
  { path: 'callback', component: CallbackComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    CallbackComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

在你的应用程序中，使用AuthService来处理OpenID令牌的散列片段。

import { Component } from '@angular/core';
import { AuthService } from './auth/auth.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="login()">Login</button>
  `
})
export class AppComponent {
  constructor(private authService: AuthService) {}

  login(): void {
    // 在此处执行OpenID登录流程，并获取散列片段
    const fragment = 'your_openid_token_fragment';

    this.authService.setFragment(fragment);
    this.authService.redirectToFragment();
  }
}

以上代码中，我们创建了一个AuthService服务，用于在应用程序中保存和处理散列片段。在CallbackComponent组件中，我们通过ActivatedRoute来获取散列片段，并将其保存到AuthService中。然后，我们使用AuthService中保存的散列片段来重定向到原始URL。

在应用程序的其他部分，你可以使用AuthService来处理OpenID令牌的散列片段。在示例代码中，我们在AppComponent组件中模拟了一个登录按钮，并在点击按钮时设置散列片段并重定向到原始URL。

请注意，这只是一个简单的示例，实际的OpenID登录流程可能会更加复杂。你需要根据你使用的OpenID提供商的文档来实现实际的登录流程。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库（TencentDB）等。你可以通过访问腾讯云官方网站获取更多关于这些产品的详细信息和文档链接。