带有凭据的 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

那么，为了保护您的端点，您必须首先选择有关如何签署您的呼叫并确保它们安全的策略。一种常见的方法是使用 JWT 令牌。 （还有其他选择，我为您提供我最熟悉的一种）。

这将要求用户使用他们的凭据联系您后端的端点，不安全。您需要配置您的后端，它将检查凭据，如果它们是正确的，后端将给您一个令牌，您将使用它来签署您的安全调用（使用 JWT，您将此令牌放在您的标头中，如果您后端配置正确，它将在安全 API 上检查此令牌）。

由于我们不知道你使用什么后端，我只能为你的前端推荐一个用于 JWT 令牌的库。 https://github.com/auth0/angular-jwt

该库将为您提供一个 http 客户端，如果您在本地存储了一个令牌，它将自动使用令牌对您的请求进行签名。它还允许你在你的前端 url 上放置守卫，例如，它也会自动检查存储的令牌是否未过期。

工作流程如下：

1）用户向后端发送凭据

2）后端确认凭据并发回令牌

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

1. 在安全 URL 上设置守卫，作为对您是否拥有未过期令牌的预先检查。

2. 最后使用图书馆的 HTTP 客户端，它将使用您存储在本地存储中的令牌对您的请求进行签名，使用您的安全 API 需要使用该令牌。

编辑：

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

在 auth 模块中查看配置、登录和注册组件、http 客户端以获取安全的 http 客户端、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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为了请求 cookie，您需要在请求中添加 withCredentials 。看下面的代码

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

原文由 mobby 发布，翻译遵循 CC BY-SA 4.0 许可协议