En-têtes angulaires pour chaque demande
j'ai besoin de définir quelques en-têtes D'autorisation après que l'utilisateur s'est connecté, pour chaque requête ultérieure.
pour régler les en-têtes pour une requête particulière,
import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);
// HTTP POST using these headers
this.http.post(url, data, {
headers: headers
})
// do something with the response
Mais il ne serait pas possible de définir manuellement les en-têtes de requête pour chaque demande de cette façon.
comment définir les en-têtes Une fois que l'utilisateur s'est connecté, et aussi enlever ces en-têtes sur la déconnexion?
18 réponses
pour répondre, vous questionnez que vous pourriez fournir un service qui enveloppe L'objet original Http
D'angle. Quelque chose comme décrit ci-dessous.
import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
@Injectable()
export class HttpClient {
constructor(private http: Http) {}
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' +
btoa('username:password'));
}
get(url) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get(url, {
headers: headers
});
}
post(url, data) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.post(url, data, {
headers: headers
});
}
}
et au lieu d'injecter l'objet Http
vous pourriez injecter celui-ci ( HttpClient
).
import { HttpClient } from './http-client';
export class MyComponent {
// Notice we inject "our" HttpClient here, naming it Http so it's easier
constructor(http: HttpClient) {
this.http = httpClient;
}
handleSomething() {
this.http.post(url, data).subscribe(result => {
// console.log( result );
});
}
}
je pense aussi que quelque chose pourrait être fait en utilisant des fournisseurs multiples pour la classe Http
en fournissant votre propre classe en étendant la Http
... Voir ce lien: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html .
les intercepteurs HTTP sont maintenant disponible via le nouveau HttpClient
de @angular/common/http
, à partir de l'angle 4.3.X versions et au-delà .
il est assez simple d'ajouter un en-tête pour chaque requête maintenant:
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
} from '@angular/common/http';
export class AddHeaderInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header
const clonedRequest = req.clone({ headers: req.headers.set('Authorization', 'Bearer 123') });
// Pass the cloned request instead of the original request to the next handle
return next.handle(clonedRequest);
}
}
il y a un Principe d'immuabilité , c'est la raison pour laquelle la requête doit être clonée avant de fixer quelque chose de nouveau sur elle.
comme éditer des en-têtes est une tâche très courante, il y a en fait un raccourci pour cela (tout en clonant la requête):
const clonedRequest = req.clone({ setHeaders: { Authorization: 'Bearer 123' } });
après avoir créé l'intercepteur, vous devez l'enregistrer en utilisant le HTTP_INTERCEPTORS
fournir.
import { HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: AddHeaderInterceptor,
multi: true,
}],
})
export class AppModule {}
Extension BaseRequestOptions
pourrait être d'une grande aide dans ce scénario. Vérifiez le code suivant:
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, Headers, Http, BaseRequestOptions} from 'angular2/http';
import {AppCmp} from './components/app/app';
class MyRequestOptions extends BaseRequestOptions {
constructor () {
super();
this.headers.append('My-Custom-Header','MyCustomHeaderValue');
}
}
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: MyRequestOptions })
]);
cela devrait inclure 'My-Custom-Header' dans chaque appel.
mise à jour:
pour pouvoir changer l'en-tête à tout moment au lieu du code ci-dessus, vous pouvez également utiliser le code suivant pour ajouter un nouvel en-tête:
this.http._defaultOptions.headers.append('Authorization', 'token');
pour supprimer vous pouvez faire
this.http._defaultOptions.headers.delete('Authorization');
il y a Aussi une autre fonction que vous pouvez utiliser pour définir la valeur:
this.http._defaultOptions.headers.set('Authorization', 'token');
la solution ci-dessus n'est toujours pas entièrement valide dans le contexte dactylographié. _defaultHeaders est protégé et ne doit pas être utilisé comme cela. Je recommande la solution ci-dessus pour une correction rapide mais pour un long terme il est préférable d'écrire votre propre wrapper autour des appels http qui gère également auth. Prenez l'exemple suivant de auth0 qui est meilleur et propre.
https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts
Mise À Jour-Juin 2018 Je vois beaucoup de gens vont pour cette solution mais je conseille le contraire. L'en-tête d'ajout globalement enverra le token auth à chaque appel d'api sortant de votre application. Ainsi, les appels api allant à des plugins tiers comme intercom ou zendesk ou toute autre api portera également votre autorisation tête. Il pourrait en résulter un gros problème de sécurité. Ainsi, utilisez interceptor globalement, mais vérifiez manuellement si l'appel sortant est vers le point final de l'api de votre serveur ou non, puis attachez l'en-tête auth.
bien que je réponde très tard mais ça pourrait aider quelqu'un d'autre. Pour injecter des en-têtes à toutes les requêtes quand @NgModule
est utilisé, on peut faire ce qui suit:
(j'ai testé ceci en angle 2.0.1)
/**
* Extending BaseRequestOptions to inject common headers to all requests.
*/
class CustomRequestOptions extends BaseRequestOptions {
constructor() {
super();
this.headers.append('Authorization', 'my-token');
this.headers.append('foo', 'bar');
}
}
Maintenant @NgModule
faire ce qui suit:
@NgModule({
declarations: [FooComponent],
imports : [
// Angular modules
BrowserModule,
HttpModule, // This is required
/* other modules */
],
providers : [
{provide: LocationStrategy, useClass: HashLocationStrategy},
// This is the main part. We are telling Angular to provide an instance of
// CustomRequestOptions whenever someone injects RequestOptions
{provide: RequestOptions, useClass: CustomRequestOptions}
],
bootstrap : [AppComponent]
})
Dans Angular 2.1.2
j'ai abordé ce problème en élargissant l'angle de Http:
import {Injectable} from "@angular/core";
import {Http, Headers, RequestOptionsArgs, Request, Response, ConnectionBackend, RequestOptions} from "@angular/http";
import {Observable} from 'rxjs/Observable';
@Injectable()
export class HttpClient extends Http {
constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {
super(_backend, _defaultOptions);
}
_setCustomHeaders(options?: RequestOptionsArgs):RequestOptionsArgs{
if(!options) {
options = new RequestOptions({});
}
if(localStorage.getItem("id_token")) {
if (!options.headers) {
options.headers = new Headers();
}
options.headers.set("Authorization", localStorage.getItem("id_token"))
}
return options;
}
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
options = this._setCustomHeaders(options);
return super.request(url, options)
}
}
puis dans mes fournisseurs D'applications, j'ai pu utiliser une usine personnalisée pour fournir 'Http'
import { RequestOptions, Http, XHRBackend} from '@angular/http';
import {HttpClient} from './httpClient';
import { RequestOptions, Http, XHRBackend} from '@angular/http';
import {HttpClient} from './httpClient';//above snippet
function httpClientFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {
return new HttpClient(xhrBackend, requestOptions);
}
@NgModule({
imports:[
FormsModule,
BrowserModule,
],
declarations: APP_DECLARATIONS,
bootstrap:[AppComponent],
providers:[
{ provide: Http, useFactory: httpClientFactory, deps: [XHRBackend, RequestOptions]}
],
})
export class AppModule {
constructor(){
}
}
maintenant je n'ai plus besoin de déclarer toutes les méthodes Http et je peux utiliser http
comme d'habitude dans toute mon application.
crée une classe Http personnalisée en étendant le 2 Http
Provider et remplace simplement la méthode constructor
et request
dans votre classe Http personnalisée. L'exemple ci-dessous ajoute un en-tête Authorization
dans chaque requête http.
import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class HttpService extends Http {
constructor (backend: XHRBackend, options: RequestOptions) {
let token = localStorage.getItem('auth_token'); // your custom token getter function here
options.headers.set('Authorization', `Bearer ${token}`);
super(backend, options);
}
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
let token = localStorage.getItem('auth_token');
if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
// let's make option object
options = {headers: new Headers()};
}
options.headers.set('Authorization', `Bearer ${token}`);
} else {
// we have to add the token to the url object
url.headers.set('Authorization', `Bearer ${token}`);
}
return super.request(url, options).catch(this.catchAuthError(this));
}
private catchAuthError (self: HttpService) {
// we have to pass HttpService's own instance here as `self`
return (res: Response) => {
console.log(res);
if (res.status === 401 || res.status === 403) {
// if not authenticated
console.log(res);
}
return Observable.throw(res);
};
}
}
puis configurer votre main app.module.ts
pour fournir le XHRBackend
comme le ConnectionBackend
fournisseur et le RequestOptions
à votre classe Http personnalisée:
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
imports: [..],
providers: [
{
provide: HttpService,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpService(backend, options);
},
deps: [XHRBackend, RequestOptions]
}
],
bootstrap: [ AppComponent ]
})
après ça, vous pouvez maintenant utiliser votre http personnalisé fournisseur de services. Par exemple:
import { Injectable } from '@angular/core';
import {HttpService} from './http.service';
@Injectable()
class UserService {
constructor (private http: HttpService) {}
// token will added automatically to get request header
getUser (id: number) {
return this.http.get(`/users/${id}`).map((res) => {
return res.json();
} );
}
}
voici un guide complet - http://adonespitogo.com/articles/angular-2-extending-http-provider /
Mieux vaut tard que jamais... = )
vous pouvez prendre le concept de prolongée BaseRequestOptions
(d'ici https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ) et rafraîchir les en-têtes "à la volée" (pas seulement dans le constructeur). Vous pouvez utiliser getter/setter "headers" propriété override comme ceci:
import { Injectable } from '@angular/core';
import { BaseRequestOptions, RequestOptions, Headers } from '@angular/http';
@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions {
private superHeaders: Headers;
get headers() {
// Set the default 'Content-Type' header
this.superHeaders.set('Content-Type', 'application/json');
const token = localStorage.getItem('authToken');
if(token) {
this.superHeaders.set('Authorization', `Bearer ${token}`);
} else {
this.superHeaders.delete('Authorization');
}
return this.superHeaders;
}
set headers(headers: Headers) {
this.superHeaders = headers;
}
constructor() {
super();
}
}
export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };
Voici une version améliorée de la réponse acceptée, mise à jour pour Angular2 final:
import {Injectable} from "@angular/core";
import {Http, Headers, Response, Request, BaseRequestOptions, RequestMethod} from "@angular/http";
import {I18nService} from "../lang-picker/i18n.service";
import {Observable} from "rxjs";
@Injectable()
export class HttpClient {
constructor(private http: Http, private i18n: I18nService ) {}
get(url:string):Observable<Response> {
return this.request(url, RequestMethod.Get);
}
post(url:string, body:any) {
return this.request(url, RequestMethod.Post, body);
}
private request(url:string, method:RequestMethod, body?:any):Observable<Response>{
let headers = new Headers();
this.createAcceptLanguageHeader(headers);
let options = new BaseRequestOptions();
options.headers = headers;
options.url = url;
options.method = method;
options.body = body;
options.withCredentials = true;
let request = new Request(options);
return this.http.request(request);
}
// set the accept-language header using the value from i18n service that holds the language currently selected by the user
private createAcceptLanguageHeader(headers:Headers) {
headers.append('Accept-Language', this.i18n.getCurrentLang());
}
}
bien sûr, il devrait être étendu pour des méthodes comme delete
et put
si nécessaire (je n'en ai pas encore besoin à ce stade de mon projet).
l'avantage est qu'il y a moins de code dupliqué dans le get
/ post
/... méthode.
notez que dans mon cas j'utilise des cookies pour l'authentification. J'avais besoin d' l'en-tête pour i18n (l'en-tête Accept-Language
) car de nombreuses valeurs retournées par notre API sont traduites dans la langue de l'utilisateur. Dans mon application, le service i18n contient la langue actuellement sélectionnée par l'utilisateur.
Que Diriez-vous de garder un Service séparé comme suit
import {Injectable} from '@angular/core';
import {Headers, Http, RequestOptions} from '@angular/http';
@Injectable()
export class HttpClientService extends RequestOptions {
constructor(private requestOptionArgs:RequestOptions) {
super();
}
addHeader(headerName: string, headerValue: string ){
(this.requestOptionArgs.headers as Headers).set(headerName, headerValue);
}
}
et si vous appelez cela d'un autre endroit utilisez this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);
et vous verrez l'en-tête ajouté par exemple: - autorisation comme suit
Après quelques recherches, j'ai trouvé la finale et le plus simple est d'étendre BaseRequestOptions
que je préfère.
Ce qui suit sont les façons dont j'ai essayé et abandonner pour une raison quelconque:
1. prolonger BaseRequestOptions
, et ajouter des en-têtes dynamiques dans constructor()
. Il ne peut pas fonctionner si je me connecte. Il sera créé une fois. Donc, il n'est pas dynamique.
2. prolonger Http
. Même raison que ci-dessus, je ne peux pas ajouter des en-têtes dynamiques constructor()
. Et si je réécris la méthode request(..)
, et fixe des en-têtes, comme ceci:
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
let token = localStorage.getItem(AppConstants.tokenName);
if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
options = new RequestOptions({});
}
options.headers.set('Authorization', 'token_value');
} else {
url.headers.set('Authorization', 'token_value');
}
return super.request(url, options).catch(this.catchAuthError(this));
}
vous avez juste besoin d'écraser cette méthode, mais pas toutes les méthodes get/post/put.
3.Et ma solution préférée est d'étendre BaseRequestOptions
et de remplacer merge()
:
@Injectable()
export class AuthRequestOptions extends BaseRequestOptions {
merge(options?: RequestOptionsArgs): RequestOptions {
var newOptions = super.merge(options);
let token = localStorage.getItem(AppConstants.tokenName);
newOptions.headers.set(AppConstants.authHeaderName, token);
return newOptions;
}
}
cette fonction merge()
sera appelée pour chaque requête.
bien que je réponde très tard mais si quelqu'un cherche une solution plus facile.
nous pouvons utiliser angular2-jwt. angular2-jwt est utile pour attacher automatiquement un JSON Web Token (JWT) comme en-tête D'autorisation lors de requêtes HTTP à partir d'une application Angular 2.
nous pouvons définir des en-têtes globaux avec l'option de configuration avancée
export function authHttpServiceFactory(http: Http, options: RequestOptions) {
return new AuthHttp(new AuthConfig({
tokenName: 'token',
tokenGetter: (() => sessionStorage.getItem('token')),
globalHeaders: [{'Content-Type':'application/json'}],
}), http, options);
}
et envoi par token de requête comme
getThing() {
let myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
this.authHttp.get('http://example.com/api/thing', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
// Pass it after the body in a POST request
this.authHttp.post('http://example.com/api/thing', 'post body', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
}
C'est ce que j'ai fait pour définir token avec chaque requête.
import { RequestOptions, BaseRequestOptions, RequestOptionsArgs } from '@angular/http';
export class CustomRequestOptions extends BaseRequestOptions {
constructor() {
super();
this.headers.set('Content-Type', 'application/json');
}
merge(options?: RequestOptionsArgs): RequestOptions {
const token = localStorage.getItem('token');
const newOptions = super.merge(options);
if (token) {
newOptions.headers.set('Authorization', `Bearer ${token}`);
}
return newOptions;
}
}
et s'inscrire en app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: RequestOptions, useClass: CustomRequestOptions }
],
bootstrap: [AppComponent]
})
export class AppModule { }
j'aime l'idée de passer outre les options par défaut, cela semble être une bonne solution.
cependant, si vous êtes jusqu'à l'extension de la classe Http
. Assurez-vous de lire ce à travers!
certaines réponses ici montrent en fait une surcharge incorrecte de la méthode request()
, ce qui pourrait conduire à des erreurs difficiles à attraper et un comportement étrange. Je suis tombé sur moi-même.
Cette solution est basé sur request()
mise en œuvre de la méthode en angle 4.2.x
, mais devrait être compatible avec l'avenir:
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {
ConnectionBackend, Headers,
Http as NgHttp,
Request,
RequestOptions,
RequestOptionsArgs,
Response,
XHRBackend
} from '@angular/http';
import {AuthenticationStateService} from '../authentication/authentication-state.service';
@Injectable()
export class Http extends NgHttp {
constructor (
backend: ConnectionBackend,
defaultOptions: RequestOptions,
private authenticationStateService: AuthenticationStateService
) {
super(backend, defaultOptions);
}
request (url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
if ('string' === typeof url) {
url = this.rewriteUrl(url);
options = (options || new RequestOptions());
options.headers = this.updateHeaders(options.headers);
return super.request(url, options);
} else if (url instanceof Request) {
const request = url;
request.url = this.rewriteUrl(request.url);
request.headers = this.updateHeaders(request.headers);
return super.request(request);
} else {
throw new Error('First argument must be a url string or Request instance');
}
}
private rewriteUrl (url: string) {
return environment.backendBaseUrl + url;
}
private updateHeaders (headers?: Headers) {
headers = headers || new Headers();
// Authenticating the request.
if (this.authenticationStateService.isAuthenticated() && !headers.has('Authorization')) {
headers.append('Authorization', 'Bearer ' + this.authenticationStateService.getToken());
}
return headers;
}
}
notez que j'importe la classe d'origine de cette façon import { Http as NgHttp } from '@angular/http';
afin d'éviter les conflits de noms.
le problème abordé ici est que la méthode
request()
a deux signatures d'appel différentes. Lorsque l'objetRequest
est passé à la place de L'URLstring
, l'argumentoptions
est ignoré par Anguleux. Les deux cas doivent donc être traités correctement.
et voici l'exemple de la façon d'enregistrer cette classe dépassée avec conteneur DI:
export const httpProvider = {
provide: NgHttp,
useFactory: httpFactory,
deps: [XHRBackend, RequestOptions, AuthenticationStateService]
};
export function httpFactory (
xhrBackend: XHRBackend,
requestOptions: RequestOptions,
authenticationStateService: AuthenticationStateService
): Http {
return new Http(
xhrBackend,
requestOptions,
authenticationStateService
);
}
avec une telle approche, vous pouvez injecter la classe Http
normalement, mais votre classe dépassée sera magiquement injecté à la place. Cela vous permet d'intégrer votre solution facilement sans modifier les autres parties de l'application (polymorphisme).
il suffit d'ajouter httpProvider
à la propriété providers
de vos métadonnées de module.
pour les angulaires 5 et plus, nous pouvons utiliser HttpInterceptor pour généraliser les opérations de requête et de réponse. Cela nous aide à éviter la duplication:
1) en-têtes communs
2) Spécification du type de réponse
3 )requête D'interrogation
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse,
HttpErrorResponse
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
requestCounter: number = 0;
constructor() {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
responseType: 'json',
setHeaders: {
Authorization: `Bearer token_value`,
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
});
return next.handle(request).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// do stuff with response if you want
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
// do stuff with response error if you want
}
});
}
}
nous pouvons utiliser cette classe AuthHttpInterceptor comme fournisseur pour les HttpInterceptors:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing-module';
import { AuthHttpInterceptor } from './services/auth-http.interceptor';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthHttpInterceptor,
multi: true
}
],
exports: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
il y a eu quelques changements pour l'angle 2.0.1 et plus:
import {RequestOptions, RequestMethod, Headers} from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
//you can move this class to a better place
class GlobalHttpOptions extends RequestOptions {
constructor() {
super({
method: RequestMethod.Get,
headers: new Headers({
'MyHeader': 'MyHeaderValue',
})
});
}
}
@NgModule({
imports: [ BrowserModule, HttpModule, AppRoutingModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ],
providers: [ { provide: RequestOptions, useClass: GlobalHttpOptions} ]
})
export class AppModule { }
j'ai la possibilité de choisir une solution plus simple > ajouter de nouveaux en-têtes aux options par défaut fusionner ou charger par votre fonction api get (ou autre).
get(endpoint: string, params?: any, options?: RequestOptions) {
if (!options) {
options = new RequestOptions();
options.headers = new Headers( { "Accept": "application/json" } ); <<<<
}
// [...]
}
bien sûr, vous pouvez externaliser ces en-têtes dans les options par défaut ou quoi que ce soit dans votre classe. C'est dans l'api générée par ionique.ts @Injectable() à l'exportation de la classe API {}
c'est très rapide et ça marche pour moi. Je ne voulais pas de format JSON/ld.
le plus simple de tous
créer un config.ts
fichier
import { HttpHeaders } from '@angular/common/http';
export class Config {
url: string = 'http://localhost:3000';
httpOptions: any = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': JSON.parse(localStorage.getItem('currentUser')).token
})
}
}
puis sur votre service
, il suffit d'importer le config.ts
fichier
import { Config } from '../config';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class OrganizationService {
config = new Config;
constructor(
private http: HttpClient
) { }
addData(data): Observable<any> {
let sendAddLink = `${this.config.url}/api/addData`;
return this.http.post(sendAddLink , data, this.config.httpOptions).pipe(
tap(snap => {
return snap;
})
);
}
je pense que c'était le plus simple et le plus sûr.
vous pouvez utiliser canActive
dans vos itinéraires, comme ceci:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate() {
// If user is not logged in we'll send them to the homepage
if (!this.auth.loggedIn()) {
this.router.navigate(['']);
return false;
}
return true;
}
}
const appRoutes: Routes = [
{
path: '', redirectTo: '/deals', pathMatch: 'full'
},
{
path: 'special',
component: PrivateDealsComponent,
/* We'll use the canActivate API and pass in our AuthGuard.
Now any time the /special route is hit, the AuthGuard will run
first to make sure the user is logged in before activating and
loading this route. */
canActivate: [AuthGuard]
}
];