带有jwt的Angular 2 AuthHttp未连接

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 Network 选项卡中看到您的标头已添加到您的请求中。

编辑：

如文档中所述，默认情况下，它会将令牌值附加到 AUTH_PROVIDERS 中定义的 Token Getter Function 的标头中。

因此，您需要在 LocalStorage 中添加您的 JWT，并使用默认名称 id_token。

为了给你我的工作示例，我在身份验证过程中设置了一个 JWT，在那里我得到一个 JWT 作为我的 Http 调用的响应：

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 实例应按预期将标头添加到您的请求中......

如果您的 Token 不是 JWT，它可能无法正常工作。要检查它是否良好，您可以使用https://jwt.io/ 之类的网站进行解码。

如果仍然无法正常工作，则表示问题来自其他地方。未正确提供的服务等。