角2 AuthHttp与jwt不连接

Question

我试图使用jwt的authHttp将一个API连接设置到特定的后端。我试着让它先没有任何标记，所以我可以测试它，但它接缝，它甚至没有连接。我用在以下几个方面：

  this.authHttp.get('localhost:3001/api/basic')
  .subscribe(
    data => console.log("data"),
    err => console.log(err),
    () => console.log('Request Complete')
  );

我在控制台中遇到的错误是AuthHttpError {}

我设置了我的ngModules，如指南中所述：

  providers: [
{
  provide: AuthHttp,
  useFactory: authHttpServiceFactory,
  deps: [Http, RequestOptions]
}

和

function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({noTokenScheme : true}), http);
}

最让我抓狂的是，使用http就像这样工作得很好：

this.http.get('http://localhost:3001/api/basic').subscribe(
  data=> console.log(data),
  error=> console.log("Getting Error") 
);

您可能在想“为什么他当时不使用http而不是authHttp?”嗯，那是因为设置一个石楠“授权”和它的令牌接缝不可能用http。

任何帮助或指导都是非常有帮助的。

Answer 1

如果您不需要 JsonWebTokens，而只是想添加自定义标头，您可以这样做，而不必导入angular2-jwt库：

为您服务：

private customHeaders: Headers = this.setCredentialsHeader();

setCredentialsHeader() {
    let headers = new Headers();
    let credentials = window.localStorage.getItem('credentials2');
    headers.append('Authorization', 'Basic ' + credentials);
    return headers;
}

someMethod() {
  let url = 'your.URL.to.API';

  return this.http
    .get(url, { headers: this.customHeaders })
    .map(result => {
      console.log(result);
    });
}

通过这种方式，您可以将Authorization头添加到所需的数据类型。

如果它是您要查找的Authorization Bearer类型头，并与angular2-jwt一起使用，您可以先使用默认配置，然后再尝试通过工厂提供自己的AuthHttp实例。调试和找出问题所在要简单得多。

来自文档：https://github.com/auth0/angular2-jwt#configuration-options

AUTH_PROVIDERS提供默认配置设置：

在您的模块中使用您的服务，只需像这样导入AUTH_PROVIDERS：

import { AUTH_PROVIDERS } from 'angular2-jwt';

...

@NgModule({
  ...
  providers: [
    AUTH_PROVIDERS,
    ...
  ]
})

只需像以前一样在服务中使用AuthHttp实例。

您应该在Navigator选项卡中看到您的标题被添加到请求中。

编辑:

正如文档中所述，默认情况下，它会在Token Getter Function中定义的标头中追加令牌值。

因此，您需要将您的JWT添加到您的LocalStorage中，默认名称为id_token。

为了给出我的工作示例，我在身份验证过程中设置了一个JWT，其中我从我的Http调用中获得了一个JWT作为响应：

auth.service.ts

  this.identityService.setToken(token.accessToken);

identity.service.ts

  setToken(token?) {
    if (token) {
      window.localStorage.setItem('id_token', token);
    } else {
      window.localStorage.removeItem('id_token');
    }
  }

如果操作正确，您应该能够在网络选项卡中看到您的JWT。之后，AuthHttp实例应该按照预期将头添加到请求中.

如果令牌不是JWT，则可能无法正常工作。要检查它是否是一个好的，你可以使用一个网站，如https://jwt.io/，在那里它将被解码。

如果它仍然不起作用，这意味着问题来自其他地方。未正确提供的服务等