Comment passer un jeton dans la section d'en-tête dans le champ d'autorisation en angulaire

Essayez comme ceci:

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

let headers = new HttpHeaders()
    .set('Authorization', 'Bearer ' + this.token)
    .set('Content-Type', 'application/json')
    .set('InstanceName', 'ORISSA');

return this.http.post(this.api_url,null, headers );

Pour définir plusieurs en- têtes, essayez comme ceci:

let header = new HttpHeaders().set("Authorization", 'Bearer ' + this.token);

return this.http.post(this.api_url,null, header);

En ce qui concerne la meilleure façon de gérer les en-têtes d'authentification dans Angular> 4, il est préférable d'utiliser les intercepteurs Http pour les ajouter à chaque requête, puis d'utiliser les gardes pour protéger vos itinéraires.

Voici un exemple complet d'un AuthInterceptor que j'utilise dans mon application:

auth.interceptor.ts

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

Vous devrez enregistrer votre intercepteur dans l'app.module en tant que fournisseur:

app.module.ts

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from '../auth/auth.interceptor';

...

imports: [
    HttpClientModule,
    ...
],
providers: [
    {
      provide : HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi   : true,
    },
    ...
],

...

Visitez https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

En ce qui concerne le côté Go des choses, il s'agit probablement d'un cas de non-concordance entre les en-têtes de demande que vous envoyez et les en-têtes autorisés par CORS. La première chose que vous devriez essayer est de les autoriser tous:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });
    return next.handle(req);
  }
}    

Et si le problème disparaît, essayez de structurer soigneusement votre CORS un par un en fonction de ce que votre client envoie.

Comme méthode alternative, vous pouvez essayer d'utiliser cette bibliothèque angular-jwt. Elle fournit un HttpInterceptor à l' HttpInterceptor qui attache automatiquement un jeton aux requêtes HttpClient .

De plus, il a beaucoup d'aides isTokenExpired comme isTokenExpired , decodeToken , etc. dans JwtHelperService . Vous pouvez le configurer en tant que module:

JwtModule.forRoot({
  config: {
    // ...
    headerName: 'Authorization',
    tokenGetter: () => {
      return localStorage.getItem('access_token');
    }
  }
});

L'exemple ci-dessus utilise localStorage, mais vous pouvez stocker le jeton n'importe où sur le client en fonction de votre cas d'utilisation exact.

Réponse courte

    let headers = new HttpHeaders()
          .set('Authorization', 'Bearer ' + token)
          .set('Content-Type', 'application/json'); 

    this.http.put(`${url}`, null, { headers });

    this.http.get(`${url}`, { headers });

    this.http.delete(`${url}`, { headers });

Plus de détails ( comment j'ai découvert )?

Lorsque vous survolez la fonction, vous trouverez des en- headers sous l' objet d' options pas directement.

les en-têtes peuvent être de type HttpHeaders ou string . Je préfère utiliser HttpHeaders comme je vous l'ai montré.