Angular 6 httpClient 带凭据的 Post 请求

Question

我有一些代码，可以发布一些数据来创建数据记录。

它在一个服务中：

以下是代码:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  create() {
      const postedData = { userid: 1, title: 'title here', body: 'body text' };
      return this.http.post('https://jsonplaceholder.typicode.com/posts', postedData, httpOptions).subscribe(result => {
        console.log(result);
      }, error => console.log('There was an error: '));
  }

}

我的问题是，当url要求用户登录时，我该怎么做？我该如何传递凭据？

- user9273032

Answer 1

为了使用 cookie 发起请求，您需要在请求中添加 withCredentials。请参考以下代码。

const httpOptions = {
 headers: new HttpHeaders({
  'Authorization': fooBarToken
 }),
 withCredentials: true
};

- mobby

Answer 2

以下代码也可以工作:

return this.http.get<{}>('YOU API URL', {
      withCredentials: true
 })

- Patricio Vargas

Answer 3

为了保护您的端点，您必须首先选择签署调用的策略，并使其安全。常见方法是使用JWT令牌。（还有其他替代方案，我提供我最熟悉的方法）。

这将要求用户使用其凭据在后端上联系未经保护的端点。您需要配置您的后端，它将检查凭据，如果正确，则后端将返回一个令牌，您将使用该令牌来签署您的安全调用（使用JWT时，将此令牌放入标题中，如果您的后端已正确配置，则将在受保护的API上检查此令牌）。

由于我们不知道您使用的后端是什么，因此我只能为您的前端推荐一个JWT令牌库。https://github.com/auth0/angular-jwt 此库将为您提供一个HTTP客户端，如果您已在本地存储了令牌，则会自动使用令牌对您的请求进行签名。它还允许您在前端URL上放置守卫，这也会自动检查存储的令牌是否已过期等。

工作流程如下：

1）用户向后端发送凭据

2) 后端确认凭据并发送令牌

3) 您将令牌存储在前端的本地存储中，并配置库以使用它。

4) 在受保护的URL上设置守卫，作为预先检查您是否具有未过期的令牌。

5) 最后，使用库的HTTP客户端，该客户端将使用存储在本地存储中的令牌对请求进行签名，这将需要使用安全API。

编辑：

我有一个在Angular中使用JWT令牌的基本模板。您可以在这里找到它 https://github.com/BusschaertTanguy/angular2_template/。

在auth模块中查找配置、登录和注册组件、安全http客户端的http客户端、token处理和路由守卫的auth和auth-guard服务。

一些来自模板的快速代码片段可帮助您：

//Library Configuration
export function authHttpServiceFactory(
  http: Http,
  options: RequestOptions
) {
  return new AuthHttp(
    new AuthConfig({
      tokenName: 'token',
      tokenGetter: (() => localStorage.getItem('token')),
      globalHeaders: [{ 'Content-Type': 'application/json' }]
    }),
    http,
    options
  );
}

@NgModule({
  providers: [{
    provide: AuthHttp,
    useFactory: authHttpServiceFactory,
    deps: [Http, RequestOptions]
  }]
})
export class AuthModule { }


//HttpService
get(url: string): Observable<any> {
    return this.http.get(endpoint).map(data => data.json());
  }


//LoginComponent
login() {
    this.httpService.get(urlToLogin).subscribe(
      data => {
        localStorage.setItem('token', data.access_token);
      }
    );
}

这些是查找前端配置的地方，您还可以按照库页面上的教程进行操作，因为这是我实现它的方式，只是在某些地方添加了一些抽象，以便让您知道从哪里开始。

- TanguyB

---

op正在使用angular/common/http。Http和RequestOptions已经被弃用。 - mobby