添加身份验证标头
为发出的请求附加令牌
添加身份验证标头 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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);
};从服务中读取令牌
注入身份验证或令牌服务，以获取当前令牌。在服务中使用信号或 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
不要将令牌泄露给第三方 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 是简洁的方式。您也可以使用 req.headers.set(...)，并通过 { headers } 传入。setHeaders 会合并；它不会替换所有 headers。
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 发送 Cookie
如果身份验证使用 HttpOnly Cookie 而不是令牌，请设置 withCredentials，以便浏览器跨源发送 Cookie。
return next(req.clone({ withCredentials: true }));刷新过期令牌
刷新令牌时，拦截器可以捕获 401，申请新令牌，然后重试原始请求——这是错误处理课程中介绍的更高级模式。
保持拦截器纯粹
拦截器应读取令牌并进行克隆——避免在此处触发导航或执行繁重逻辑。请保持职责专一，使请求管道始终具有可预测性。
注册身份验证拦截器
将其放在链的前面，以便在日志记录拦截器或其他拦截器运行前，请求头已经存在。
provideHttpClient(
withInterceptors([authInterceptor, loggingInterceptor])
)快速检查
测试您对添加身份验证请求头的理解。
回顾：添加身份验证请求头
身份验证拦截器会将令牌附加到发出的请求。
- 使用
setHeaders: { Authorization: ... }进行克隆。 - 没有令牌时跳过；仅限于您的 API URL。
- 使用
withCredentials进行 Cookie 身份验证。
下一步：全局处理错误。
常见问题解答
「添加身份验证标头」课时是免费的吗？
是的 — 「添加身份验证标头」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「添加身份验证标头」这节课中我会学到什么？
为发出的请求附加令牌 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「添加身份验证标头」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。