Angular Academy · Lektion

Tilføjelse af auth-headere

Vedhæft tokens til udgående forespørgsler.

Lektion 2 af 413 trin

Tilføjelse af auth-headere er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvorfor bruge interception til auth

De fleste API'er kræver en Authorization-header i hver forespørgsel. I stedet for at tilføje den manuelt til hvert kald indsætter en interceptor den automatisk i alle udgående forespørgsler.

Kloning for at tilføje en header

Da forespørgsler ikke kan ændres, skal du klone med setHeaders for at tilknytte tokenet.

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

Læsning af tokenet fra en service

Injicér en auth-/token-service for at hente det aktuelle token. Hvis du bruger et signal eller en BehaviorSubject i servicen, holdes værdien opdateret.

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

Spring over, når der ikke er et token

Hvis brugeren ikke er logget ind, skal du sende den oprindelige forespørgsel videre uden ændringer.

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

Tilknyt kun til dit API

Send ikke dit token videre til tredjeparts-URL'er. Kontrollér, at forespørgslens URL tilhører din backend.

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

setHeaders kontra headers.set

setHeaders i clone er den korte løsning. Du kan også bruge req.headers.set(...) og sende resultatet via { headers }. setHeaders fletter headere sammen; den erstatter ikke alle headere.

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

Tilføjelse af flere headere

Tilknyt flere headere på én gang i en enkelt klon.

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

withCredentials til cookies

Hvis auth bruger HttpOnly-cookies i stedet for tokens, skal du angive withCredentials, så browseren sender dem på tværs af oprindelser.

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

Opdatering af et udløbet token

Ved opdatering af tokenet kan interceptoren fange en 401, anmode om et nyt token og derefter prøve den oprindelige forespørgsel igen — et mere avanceret mønster, der gennemgås sammen med fejlhåndtering.

Hold interceptoren ren

Interceptoren bør læse tokenet og klone forespørgslen — undgå at udløse navigation eller tung logik her. Hold ansvarsområderne fokuserede, så forespørgsels-pipelinen forbliver forudsigelig.

Registrering af auth-interceptoren

Placér den tidligt i kæden, så headeren er til stede, før logning eller andre interceptors kører.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Hurtig kontrol

Afprøv din forståelse af tilføjelse af auth-headere.

Besvar den i den interaktive lektion

Opsummering: Tilføjelse af auth-headere

En auth-interceptor tilknytter tokenet til udgående forespørgsler.

Klon med setHeaders: { Authorization: ... }.
Spring over, når der ikke er et token, og begræns det til din API-URL.
Brug withCredentials til cookie-baseret auth.

Næste: global fejlhåndtering.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Tilføjelse af auth-headere” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Tilføjelse af auth-headere”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Tilføjelse af auth-headere”?

Vedhæft tokens til udgående forespørgsler. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Tilføjelse af auth-headere”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy