Home / Questions / 382571
Accepted
D. Albarracín
Asked: 2020-08-18 06:37:26 +0800 CST 2020-08-18 06:37:26 +0800 CST

执行 POST 添加 Header 和 Params

  • 772

我正在尝试使用 Angular 中的令牌登录。为此，我需要通过 POST 方法发送用户名和密码，包括标题和参数。

这些是标头和参数：

'Content-Type','application/x-www-form-urlencoded'
'scope','...lo que sea...'
'grant_type', 'password'
'Authorization','... lo que sea...'

但我不知道如何在 POST 中包含这些数据，以便它返回 access_token 和其他字段。

我尝试了以下方法：

let cabecera = new HttpHeaders();
let parametros = new HttpParams();

cabecera.set('Content-Type','application/x-www-form-urlencoded').set('Authorization','...');
parametros.set('grant_type', 'password');
parametros.set('scope','...');

let opciones = {
  headers: cabecera,
  params: parametros
}

this.http.post(this.url,opciones).subscribe(data =>{
  console.log(data);
})

但是这种方式不会添加用户名和密码进行验证。它返回错误。

angular

3 Answers

  1. Best Answer

    我是这样解决的：

    login(login){

    let parametros = new HttpParams();
    parametros = parametros.append('grant_type','----');
    parametros = parametros.append('scope','-- lo que sea--');
    parametros = parametros.append('username',login.username);
    parametros = parametros.append('password',login.password);

    const opciones = {
      headers: new HttpHeaders({
        'Content-Type':'---',
        'Authorization': '-- lo que sea --'
      }),
      params: parametros
    };

    return this.http.post(`${this.URL}/token`,login,opciones);
}

    我还必须在参数中添加用户名和密码。

    • 1

  2. 您好，在我看来您将参数传递给 POST 错误，我向您展示一个 POST 示例：

        //Header json
    const headers: any = {
       "Authorization": "ACCESS TOKEN"
    };

    //Post options pass it to HttpHeaders Class 
    const httpOptions = {
        headers: new HttpHeaders(headers),
    };

    //Url
    const url: string = "https://url.com/uri";

    //Do request
    return this.httpClient.post(url, obj, httpOptions)

    该方法post接受 3 个参数，URL即目标 HTTP 地址，OBJ即作为请求正文发送的 json，第三个参数是OPTIONS，您可以使用它来发送所需的标头，就像上面的示例一样。 （https://angular.io/guide/http#making-a-post-request）

    • 0

  3. 了解 Angular 及其处理请求的方式很重要的一件事是对象HttpHeaders和HttpParams是不可变的。每次使用方法set(...)时，都必须保存返回的对象。

    示例请求可能如下所示：

    @Injectable()
export class AuthenticationService {

  constructor(
    private http: HttpClient,
    ...
  ) { }

  login(username: string, password: string): Observable<...> {
    
    const headers = new HttpHeaders()
      .append('Authorization', `Basic ${this.b64EncodeUnicode(username + ':' + password)}`)
      .append('X-Requested-With', 'XMLHttpRequest');
    return this.http.post<string>(ENV.url.login, null, { headers: headers }).pipe(
      map((data: string) => {
        // login successful if there's a jwt token in the response
        if (data) {
          return data;
        } else {
          // failed login
          return null;
        }

      }),
      catchError((error: any) =>
        observableThrowError(error || 'Server error'))
    );
  }

  b64EncodeUnicode(str: string): string {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
      return String.fromCharCode(('0x' + p1) as any);
    }));
  }
}

    解释：

    发送用户名和密码的一种常见方式是基本身份验证'Basic <usuario>:<password>'，这需要将标头中的字符串传递给 Base64 "Authorization"。服务器的响应可能会有所不同，从仅发送令牌或以 JSON 或其他格式发送带有更多信息的令牌。问题是传递到 base 64 特殊字符可能是问题的根源，因此在给定的示例中执行了某些先前的转换，这就是我添加b64EncodeUnicode.

    • 0