Angular 5 路由器插座，JWT答案

【问题标题】：Angular 5 router-outlet, JWTAngular 5 路由器插座，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 来限制对受保护组件的访问

标签： angular rest api jwt

【解决方案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
   }
}

【讨论】：