Angular Academy · 강의

인증 헤더 추가

나가는 요청에 토큰을 첨부합니다.

인증 헤더 추가은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

인증에 인터셉터를 사용하는 이유

대부분의 API는 모든 요청에 Authorization 헤더를 요구합니다. 각 호출에 수동으로 추가하는 대신 인터셉터가 모든 발신 요청에 자동으로 추가합니다.

헤더를 추가하기 위해 복제하기

요청은 변경할 수 없으므로 setHeaders와 함께 복제하여 토큰을 추가합니다.

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

서비스에서 토큰 읽기

인증/토큰 서비스를 주입하여 현재 토큰을 가져옵니다. 서비스 내부에서 signal 또는 BehaviorSubject를 사용하면 값이 최신 상태로 유지됩니다.

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

토큰이 없으면 건너뛰기

사용자가 로그인하지 않은 경우 원래 요청을 변경하지 않고 그대로 전달합니다.

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

자체 API에만 추가하기

토큰이 제3자 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 비교

clone에서 setHeaders를 사용하는 것이 간결한 방법입니다. req.headers.set(...)을 사용한 뒤 { headers }를 통해 전달할 수도 있습니다. setHeaders는 헤더를 병합하며 모든 헤더를 교체하지는 않습니다.

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

여러 헤더 추가하기

한 번의 복제로 여러 헤더를 동시에 추가합니다.

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

쿠키에 withCredentials 사용하기

인증에 토큰 대신 HttpOnly 쿠키를 사용한다면 withCredentials를 설정하여 브라우저가 다른 출처로도 쿠키를 전송하게 합니다.

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

만료된 토큰 새로 고침

토큰을 새로 고칠 때 인터셉터는 401을 잡아 새 토큰을 요청한 다음 원래 요청을 재시도할 수 있습니다. 이는 오류 처리에서 다루는 고급 패턴입니다.

인터셉터를 순수하게 유지하기

인터셉터는 토큰을 읽고 요청을 복제하는 역할을 해야 합니다. 여기서 탐색을 시작하거나 무거운 로직을 실행하지 마세요. 요청 파이프라인을 예측 가능하게 유지하려면 책임을 집중해야 합니다.

인증 인터셉터 등록하기

로깅이나 다른 인터셉터가 실행되기 전에 헤더가 포함되도록 체인의 앞부분에 배치합니다.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

빠른 확인

인증 헤더 추가에 대한 이해도를 확인해 보세요.

복습: 인증 헤더 추가

인증 인터셉터는 발신 요청에 토큰을 추가합니다.

setHeaders: { Authorization: ... }와 함께 복제합니다.
토큰이 없으면 건너뛰고 자체 API URL에만 적용합니다.
쿠키 인증에는 withCredentials를 사용합니다.

다음: 전역 오류 처리입니다.

자주 묻는 질문

“인증 헤더 추가” 강의는 무료인가요?

네 — “인증 헤더 추가” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“인증 헤더 추가”에서 뭘 배우나요?

나가는 요청에 토큰을 첨부합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“인증 헤더 추가” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기