在 JavaScript 中用 Fetch API 发送带鉴权 Token 的请求，核心是将 Token 通过 Authorization: Bearer {token} 请求头传递；需确保 Token 有效、正确拼接并避免泄露，推荐封装统一的 authFetch 函数处理鉴权与错误。
在 JavaScript 中用 Fetch API 发送带鉴权 Token 的请求，核心是把 Token 放在请求头的 Authorization 字段里，格式通常是 Bearer {token}。
设置 Authorization 请求头
Fetch 默认不携带任何认证信息，必须手动添加请求头。Token 一般来自登录后后端返回（如 JWT），需保存（比如 localStorage 或内存变量），再在每次请求时注入：
- 确保 Token 已获取并有效（非空、未过期）
- 构造 headers 对象，指定
'Content-Type': 'application/json'（如需发 JSON）和'Authorization': 'Bearer ' + token - 注意：字符串拼接前建议检查 token 是否存在，避免发送
Bearer undefined
完整请求示例
以下是一个获取用户信息的典型请求：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
const token = localStorage.getItem('auth_token');
fetch('/api/user/profile', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
})
.then(res => {
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
封装成可复用函数
为避免重复写 headers 和错误处理，推荐封装一个带鉴权的 fetch 函数：
立即学习“Java免费学习笔记（深入）”；
- 自动读取 token（例如从 localStorage）
- 统一处理 401 错误（如跳转登录页或清空 token）
- 支持传入自定义 headers，与鉴权头合并
function authFetch(url, options = {}) {
const token = localStorage.getItem('auth_token');
const headers = {
'Content-Type': 'application/json',
...options.headers,
...(token ? { 'Authorization': `Bearer ${token}` } : {})
};
return fetch(url, {
...options,
headers
});
}
// 使用
authFetch('/api/orders').then(r => r.json()).then(console.log);
注意事项
实际使用中容易忽略几个关键点：
- Token 过期时后端通常返回 401，前端应监听并主动登出，不能只靠前端时间判断
- 敏感接口建议用
credentials: 'include'配合 Cookie 鉴权时才需要；纯 Token 方案一般不用设 credentials - 如果后端要求 Token 放在其他字段（如
X-Auth-Token），按文档调整 header 名称即可，不必拘泥于 Bearer - 避免在 URL 中拼接 token（如
?token=xxx），有泄露风险
