Angular Academy · Les

Authenticatieheaders toevoegen

Voeg tokens toe aan uitgaande aanvragen

Les 2 van 413 stappen

Authenticatieheaders toevoegen is een gratis Angular Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Waarom interceptie voor auth

De meeste API's vereisen bij elke aanvraag een Authorization-header. In plaats van die handmatig aan elke aanroep toe te voegen, voegt een interceptor hem automatisch toe aan alle uitgaande aanvragen.

Een header toevoegen door te kopiëren

Omdat aanvragen onveranderlijk zijn, maak je met setHeaders een kopie om het token toe te voegen.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

Het token uit een service lezen

Injecteer een auth-/tokenservice om het huidige token op te halen. Door daarin een signal of BehaviorSubject te gebruiken, blijft de waarde actueel.

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

Overslaan als er geen token is

Als de gebruiker niet is ingelogd, stuur je de oorspronkelijke aanvraag ongewijzigd door.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

Alleen aan je API toevoegen

Laat je token niet uitlekken naar URL's van derden. Controleer daarom of de URL van de aanvraag bij je backend hoort.

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders versus headers.set

setHeaders in clone is de beknopte manier. Je kunt ook req.headers.set(...) gebruiken en het resultaat via { headers } doorgeven. setHeaders voegt headers samen; alle headers worden niet vervangen.

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

Meerdere headers toevoegen

Voeg meerdere headers tegelijk toe in één kopie.

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

withCredentials voor cookies

Als auth HttpOnly-cookies gebruikt in plaats van tokens, stel je withCredentials in zodat de browser ze cross-origin meestuurt.

return next(req.clone({ withCredentials: true }));

Een verlopen token vernieuwen

Voor het vernieuwen van een token kan de interceptor een 401 onderscheppen, een nieuw token aanvragen en daarna de oorspronkelijke aanvraag opnieuw proberen — een geavanceerd patroon dat bij foutafhandeling wordt behandeld.

De interceptor zuiver houden

De interceptor moet het token lezen en een kopie maken — voorkom dat je hier navigatie of zware logica activeert. Houd de verantwoordelijkheden beperkt, zodat de verwerkingsketen van aanvragen voorspelbaar blijft.

De auth-interceptor registreren

Plaats deze vroeg in de keten, zodat de header aanwezig is voordat logging of andere interceptors worden uitgevoerd.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Korte controle

Test je begrip van het toevoegen van auth-headers.

Beantwoord dit in de interactieve les

Samenvatting: auth-headers toevoegen

Een auth-interceptor voegt het token toe aan uitgaande aanvragen.

Maak een kopie met setHeaders: { Authorization: ... }.
Sla de aanvraag over als er geen token is en beperk de werking tot de URL van je API.
Gebruik withCredentials voor cookie-auth.

Hierna: fouten centraal afhandelen.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Authenticatieheaders toevoegen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Authenticatieheaders toevoegen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Authenticatieheaders toevoegen”?

Voeg tokens toe aan uitgaande aanvragen Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Authenticatieheaders toevoegen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy