带有jwt的Angular 2 AuthHttp未连接

Posted 2023-03-10

【中文标题】带有jwt的Angular 2 AuthHttp未连接

【英文标题】：Angular 2 AuthHttp with jwt not connecting

【发布时间】：2017-06-26 03:57:04

【问题描述】：

我正在尝试使用 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 设置石南花“授权”及其令牌接缝是不可能的。

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

【问题讨论】：

您需要什么类型的Authorization 标头？这个库是为 JWT 令牌制作的，所以不使用它们是不可能的。同时，我将通过示例发布答案

【参考方案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/ 之类的网站进行解码。

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

【讨论】：

这是我需要的授权承载。正如你所说，我已经导入了 AUTH_PROVIDERS ，但它并没有做任何调用。在 Navigator Network 选项卡中查看时，什么也没有。在控制台中，我仍然收到 AuthHttpError。

我已经通过设置 Authorization 标头尝试了 http 方式，但是在检查 NAvigatior Network 选项卡时，它看起来好像没有设置标头。我已经完成了： var headers = new Headers(); headers.append('Authorization', 'Bearer $pass'); this.http.get('localhost:8080/outputEndpoints', headers: headers ).subscribe( data=> console.log(data), error=> console.log("Getting Error") );

顺便说一句，使用 http 设置标头时，我收到以下消息：“对预检请求的响应未通过访问控制检查：不存在 'Access-Control-Allow-Origin' 标头在请求的资源上。”

这是 CORS 的问题，因为您的服务器不允许跨域请求。您需要从服务器修复它。我将编辑关于 AUTH_PROVIDERS 的问题

但如果我尝试使用 CURL 或 SOAP UI 或类似方法进行此调用，它会起作用。它会从那个变成一个应用程序吗？