Angular Academy · Lekcja

Dodawanie nagłówków uwierzytelniania

Dołączać tokeny do wychodzących żądań

Dodawanie nagłówków uwierzytelniania to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego używać interceptora do uwierzytelniania

Większość interfejsów API wymaga nagłówka Authorization przy każdym żądaniu. Zamiast dodawać go ręcznie do każdego wywołania, interceptor automatycznie dołącza go do wszystkich wychodzących żądań.

Klonowanie w celu dodania nagłówka

Ponieważ żądania są niezmienne, należy je klonować za pomocą setHeaders, aby dołączyć token.

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

Odczytywanie tokenu z usługi

Należy wstrzyknąć usługę uwierzytelniania lub tokenów, aby pobrać bieżący token. Użycie sygnału lub BehaviorSubject wewnątrz tej usługi zapewnia aktualność wartości.

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

Pomijanie żądania bez tokenu

Jeśli użytkownik nie jest zalogowany, należy przekazać oryginalne żądanie bez zmian.

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

Dołączanie wyłącznie do własnego API

Nie należy ujawniać tokenu w adresach URL firm trzecich. Trzeba sprawdzić, czy adres URL żądania należy do backendu aplikacji.

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

setHeaders a headers.set

setHeaders w funkcji clone to zwięzły sposób. Można również użyć req.headers.set(...) i przekazać wynik za pomocą { headers }. setHeaders scala nagłówki, a nie zastępuje wszystkich nagłówków.

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

Dodawanie wielu nagłówków

Wiele nagłówków można dołączyć jednocześnie w ramach jednego klonowania.

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

withCredentials dla plików cookie

Jeśli uwierzytelnianie korzysta z plików cookie HttpOnly zamiast tokenów, należy ustawić withCredentials, aby przeglądarka wysyłała je między różnymi źródłami.

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

Odświeżanie wygasłego tokenu

Podczas odświeżania tokenu interceptor może przechwycić błąd 401, pobrać nowy token, a następnie ponowić pierwotne żądanie — jest to bardziej zaawansowany wzorzec omawiany przy obsłudze błędów.

Zachowanie czystości interceptora

Interceptor powinien odczytać token i sklonować żądanie — należy unikać uruchamiania w nim nawigacji lub złożonej logiki. Warto ograniczyć jego odpowiedzialność, aby potok żądań był przewidywalny.

Rejestrowanie interceptora uwierzytelniania

Należy umieścić go wcześnie w łańcuchu, aby nagłówek był obecny przed uruchomieniem loggera lub innych interceptorów.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat dodawania nagłówków uwierzytelniania.

Podsumowanie: dodawanie nagłówków uwierzytelniania

Interceptor uwierzytelniania dołącza token do wychodzących żądań.

Należy klonować żądanie za pomocą setHeaders: { Authorization: ... }.
Pomijać żądania bez tokenu i ograniczać działanie do adresu URL własnego API.
Do uwierzytelniania za pomocą plików cookie należy używać withCredentials.

Następnie: globalna obsługa błędów.

Często zadawane pytania

Czy lekcja „Dodawanie nagłówków uwierzytelniania” jest bezpłatna?

Tak — pełny tekst „Dodawanie nagłówków uwierzytelniania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dodawanie nagłówków uwierzytelniania”?

Dołączać tokeny do wychodzących żądań Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Dodawanie nagłówków uwierzytelniania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy