Angular Academy · Урок

Добавление заголовков авторизации

Добавляйте токены к исходящим запросам

«Добавление заголовков авторизации» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Зачем перехватывать запросы для аутентификации

Большинству серверов требуется заголовок Authorization в каждом запросе. Вместо того чтобы добавлять его вручную в каждый вызов, перехватчик автоматически добавляет его ко всем исходящим запросам.

Клонирование для добавления заголовка

Поскольку запросы неизменяемы, вызовите clone с параметром setHeaders, чтобы добавить token.

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

Получение token из службы

Внедрите службу auth/token, чтобы получить текущий token. Использование сигнала или BehaviorSubject внутри службы позволяет поддерживать значение актуальным.

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

Пропуск запроса без token

Если пользователь не вошёл в систему, передайте исходный запрос без изменений.

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

Добавление только к запросам Вашего сервера

Не передавайте token сторонним URL. Проверяйте, что URL запроса относится к Вашему серверу.

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

setHeaders и headers.set

setHeaders в вызове clone — краткий способ. Также можно использовать req.headers.set(...) и передать результат через { headers }. setHeaders объединяет заголовки, а не заменяет их полностью.

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

Добавление нескольких заголовков

Добавьте несколько headers одновременно в одном клоне запроса.

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

withCredentials для cookies

Если для аутентификации вместо token используются cookies HttpOnly, установите withCredentials, чтобы браузер отправлял их между разными источниками.

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

Обновление просроченного token

Для обновления token перехватчик может перехватить ошибку 401, запросить новый token, а затем повторить исходный запрос — это более сложный шаблон, который рассматривается вместе с обработкой ошибок.

Сохранение перехватчика чистым

Перехватчик должен прочитать token и создать копию запроса — избегайте запуска навигации или сложной логики здесь. Сосредоточьтесь на его обязанностях, чтобы конвейер запросов оставался предсказуемым.

Регистрация перехватчика аутентификации

Разместите его в начале цепочки, чтобы заголовок был добавлен до того, как начнут работать ведение журнала и другие перехватчики.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете добавление заголовков аутентификации.

Повторение: добавление заголовков аутентификации

Перехватчик аутентификации добавляет token к исходящим запросам.

Клонируйте запрос с помощью setHeaders: { Authorization: ... }.
Пропускайте запросы без token и ограничивайте область действия адресом Вашего сервера.
Используйте withCredentials для аутентификации с помощью cookies.

Далее: глобальная обработка ошибок.

Часто задаваемые вопросы

Урок «Добавление заголовков авторизации» бесплатный?

Да — полный текст урока «Добавление заголовков авторизации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Добавление заголовков авторизации»?

Добавляйте токены к исходящим запросам Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Добавление заголовков авторизации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy