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") 
);

你可能在想＆＃34;为什么他不使用http而不是authHttp？＆＃34;。嗯，那是因为设置了一个希瑟＆＃34;授权＆＃34;并且它的令牌接缝不可能用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实例。

您应该会在“导航器网络”标签中看到您的标头已添加到您的请求中。

编辑：

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

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

为了给你我的工作示例，我在认证过程中设置了一个JWT，在那里我从我的Http Call获得了一个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/这样的网站进行解码。

如果它还没有工作，这意味着问题来自其他地方。未正确提供服务等

Angular 2 AuthHttp与jwt没有连接

1 个答案: