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
.