Angular 5 路由器插座，JWT

Posted 2023-03-10

【中文标题】Angular 5 路由器插座，JWT

【英文标题】：Angular 5 router-outlet, JWT

【发布时间】：2018-09-27 12:04:59

【问题描述】：

我需要像这样将令牌属性添加到我的组件中：

<div>
  <app-authentication [(token)]='token'></app-authentication>
</div>

但是路由处理我的组件，所以我不知道如何实现

[(token)]='token'

部分。

目前我的 app.component.html 看起来像这样：

<app-header></app-header>
<div class="container">
    <router-outlet></router-outlet>
</div>

和 app-routing.module.ts 这样的：

import  NgModule, Input  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';
import  ProjectListComponent  from './projects/project-list/project-list.component';
import  ProjectsViewComponent  from './projects/projects-view/projects-view.component';
import  AdminComponent  from './admin/admin.component';
import  Headers  from '@angular/http';

const routes: Routes = [
  
    path: '',
    component: ProjectListComponent,
    pathMatch: 'full'
  ,
  
    path: 'admin',
    component: AdminComponent
  ,
  
    path: ':slug',
    component: ProjectsViewComponent
  
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
)
export class Wpng2RoutingModule 

【问题讨论】：

您将出于什么目的使用@Input 作为令牌？如果此方法是为了验证对组件的访问，您可以在路由器中使用 guard 来限制对受保护组件的访问

【参考方案1】：

您应该使用依赖注入来提供令牌。你可以这样设置。

app.module.ts

import  InjectionToken  from '@angular/core';

export const JWT = new InjectionToken<string>('JWT');

@NgModule(
  imports: [
    ...
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    AuthService,
    
      provide: JWT,
      useFactory: (auth: AuthService) => authService.jwt,
      deps: [AuthService],
    ,
  ],
)
export class AppModule 

any.component.ts

import  Component, Inject  from '@angular/core';

@Component( selector: 'any' )
export class AnyComponent 
   constructor(@Inject(JWT) public jwt: string) 
      // do something with the token