为什么AuthHttp(angular2-jwt)不能被注入组件中？

Question

这些变化中最显著的是：

• 将angular npm包从“~4.0.0”更新到“~4.2.0”
• 将tsconfig.json中的模块从“system”更改为“commonjs”

我不明白这是如何改变事情的，但它起作用了！

import { AuthConfig, AuthHttp } from 'angular2-jwt';
import { NgModule } from '@angular/core';
import { HttpModule, Http, RequestOptions } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule, routingComponents } from './app.routing';

import { AppComponent } from './Components/app.component';

@NgModule({
    imports: [BrowserModule, HttpModule, AppRoutingModule],
    declarations: [AppComponent, routingComponents],
    bootstrap: [AppComponent],
    providers: [
        {
            provide: AuthHttp,
            useFactory: (http: Http, options: RequestOptions) => new AuthHttp(new AuthConfig(), http, options),
            deps: [Http, RequestOptions]
        }]
})
export class AppModule { }

import { Component } from '@angular/core';
import { AuthHttp } from 'angular2-jwt';

@Component({
    selector: "app",
    templateUrl: "/App/Components/app.component.html"
})
export class AppComponent
{
    constructor(service: AuthHttp)
    { }
}

我发现这个资源说我需要阅读更多关于DI的信息，但从我的角度来看一切都很好。https://github.com/auth0/angular2-jwt/issues/88

如果将AppComponent构造函数更改为调用new AuthConfig()，它将在transpiled js文件中生成new Angular2_jwt_1.AuthConfig()（此错误说明构造函数不存在）。但是，如果在js文件中手动将其更改为new Angular2_jwt_1.default.authconfig()，则会正确创建实例。这可能与病因有关吗？

Answer 1

我找不到出现这个问题的确切原因，但很可能是基于配置的。我所做的工作是不使用angular2-jwt库，而是将承载令牌手动添加到本angular2 jwt身份验证文章的请求库中。

以下是如何获得承载令牌。

public Login(username: string, password: string): Observable<boolean>
{
    // Prepare post headers
    var headers: Headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    // Prepare credential request
    var body: string = "grant_type=password&scope=scopes go here&username=" + username + "&password=" + password;

    return this.http
        .post("token url here", body, { headers: headers })
        .map((response: Response) =>
        {
            let token = response.json();
            token = token && token.access_token;
            if (!token)
                return false;
            else
            {
                localStorage.setItem('username', username);
                localStorage.setItem('token', token);
                return true;
            }
        });
}

以下是如何发出经过身份验证的请求（Token属性从localStorage获取当前令牌）。

public Post<T>(url: string, body: string): Observable<T>
{
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.Token });
    let options = new RequestOptions({ headers: headers });

    return this.http
        .post(url, body)
        .map((response: Response) => response.json());
}