Angular Academy · Lektion

Lägga till autentiseringsrubriker

Bifoga token till utgående förfrågningar.

Lektion 2 av 413 steg

Lägga till autentiseringsrubriker är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Varför använda interception för auth

De flesta API:er kräver en Authorization-header i varje request. I stället för att lägga till den manuellt i varje anrop lägger en interceptor automatiskt till den i alla utgående requests.

Klona för att lägga till en header

Eftersom requests är oföränderliga klonar Ni requesten med setHeaders för att bifoga token.

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

Läs token från en tjänst

Injicera en auth-/token-tjänst för att hämta den aktuella token. Om Ni använder en signal eller BehaviorSubject i tjänsten hålls värdet aktuellt.

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

Hoppa över när token saknas

Om användaren inte är inloggad skickar Ni den ursprungliga requesten vidare utan ändringar.

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

Bifoga endast till Ert API

Läck inte Er token till URL:er från tredje part. Kontrollera att requestens URL tillhör Er backend.

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

setHeaders jämfört med headers.set

setHeaders i clone är det kortfattade sättet. Ni kan också använda req.headers.set(...) och skicka det via { headers }. setHeaders slår samman headers; det ersätter inte alla headers.

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

Lägga till flera headers

Bifoga flera headers samtidigt i en enda clone.

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

withCredentials för cookies

Om auth använder HttpOnly-cookies i stället för tokens anger Ni withCredentials så att webbläsaren skickar dem mellan olika origins.

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

Förnya en utgången token

Vid tokenförnyelse kan interceptorn fånga en 401:a, begära en ny token och sedan försöka skicka den ursprungliga requesten igen – ett mer avancerat mönster som behandlas tillsammans med felhantering.

Håll interceptorn ren

Interceptorn bör läsa token och klona requesten – undvik att utlösa navigering eller tung logik här. Håll ansvarsområdena avgränsade så att requestpipen förblir förutsägbar.

Registrera auth-interceptorn

Placera den tidigt i kedjan så att headern finns på plats innan loggning eller andra interceptors körs.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Snabbkontroll

Testa Er förståelse av att lägga till auth-headers.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Lägga till auth-headers

En auth-interceptor bifogar token till utgående requests.

Klona med setHeaders: { Authorization: ... }.
Hoppa över när token saknas och begränsa till Er API-URL.
Använd withCredentials för cookie-baserad auth.

Nästa: hantera fel globalt.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lägga till autentiseringsrubriker” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Lägga till autentiseringsrubriker”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lägga till autentiseringsrubriker”?

Bifoga token till utgående förfrågningar. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Lägga till autentiseringsrubriker”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy