Skip to main content
se añadieron 637 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Una cosa que es importante saber sobre Angular y su forma de tratar las peticiones es que los objetos HttpHeaders y HttpParams son inmutables. Cada vez que usas el método set(...), tienes que guardar el objeto devuelto.

Un ejemplo de petición podría ser así:

@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);
    }));
  }
}

Explicación:

Una forma habitual de de enviar el usuario y el password es la autenticación básica, que requiere pasar a Base64 la cadena 'Basic <usuario>:<password>' en el header "Authorization". La respuesta del servidor puede variar, desde mandar sólo el token o mandarlo con más información en un JSON u otro formato. El problema es que pasar a base 64 caracteres especiales puede ser fuente de problemas, así que en el ejemplo dado se realizan ciertas transformaciones previas, por eso añadí el método b64EncodeUnicode.

Una cosa que es importante saber sobre Angular y su forma de tratar las peticiones es que los objetos HttpHeaders y HttpParams son inmutables. Cada vez que usas el método set(...), tienes que guardar el objeto devuelto.

Un ejemplo de petición podría ser así:

@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);
    }));
  }
}

Una cosa que es importante saber sobre Angular y su forma de tratar las peticiones es que los objetos HttpHeaders y HttpParams son inmutables. Cada vez que usas el método set(...), tienes que guardar el objeto devuelto.

Un ejemplo de petición podría ser así:

@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);
    }));
  }
}

Explicación:

Una forma habitual de de enviar el usuario y el password es la autenticación básica, que requiere pasar a Base64 la cadena 'Basic <usuario>:<password>' en el header "Authorization". La respuesta del servidor puede variar, desde mandar sólo el token o mandarlo con más información en un JSON u otro formato. El problema es que pasar a base 64 caracteres especiales puede ser fuente de problemas, así que en el ejemplo dado se realizan ciertas transformaciones previas, por eso añadí el método b64EncodeUnicode.

Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Una cosa que es importante saber sobre Angular y su forma de tratar las peticiones es que los objetos HttpHeaders y HttpParams son inmutables. Cada vez que usas el método set(...), tienes que guardar el objeto devuelto.

Un ejemplo de petición podría ser así:

@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);
    }));
  }
}