JavaScript中统一携带Token的核心是封装请求层自动注入，推荐用axios拦截器或封装fetch函数实现，并需处理过期刷新、安全存储及登出清理。
在 JavaScript 中实现接口请求统一携带 Token，核心是把认证逻辑抽离到请求发起层，避免每个接口手动加 Authorization 头。主流做法是封装请求函数（如基于 fetch 或 axios），并在其中自动读取、注入 Token。
使用 axios 拦截器自动注入 Token
这是最常用且推荐的方式。通过请求拦截器，在每次发送请求前自动添加 Token：
- 确保 Token 已存储（通常在 localStorage 或 sessionStorage 中）
- 设置请求拦截器，读取 Token 并设置
Authorization: Bearer <token> - 若 Token 不存在或过期，可跳转登录页或触发刷新逻辑
示例代码：
import axios from 'axios';
const apiClient = axios.create({
baseURL: '/api',
});
apiClient.interceptors.request.use(
(config) => {
const token = localStorage.getItem('access_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error)
);
// 后续所有用 apiClient 发起的请求都会自动带 Token
apiClient.get('/user/profile'); // 自动携带 Authorization 头
封装 fetch 函数统一处理认证
若项目未使用 axios，可封装原生 fetch，同样在内部读取并注入 Token：
立即学习“Java免费学习笔记（深入）”；
- 定义一个自定义的
request函数，替代直接调用fetch - 默认从 localStorage 取 Token，支持传入覆盖选项（如无需鉴权的登录接口）
- 可统一处理 401 响应：清 Token、跳登录页
示例：
async function request(url, options = {}) {
const token = localStorage.getItem('access_token');
const headers = {
'Content-Type': 'application/json',
...options.headers,
};
if (token && !options.skipAuth) {
headers.Authorization = `Bearer ${token}`;
}
const config = {
method: 'GET',
...options,
headers,
};
const res = await fetch(url, config);
if (res.status === 401) {
localStorage.removeItem('access_token');
window.location.href = '/login';
}
return res.json();
}
// 使用
request('/api/orders'); // 自动带 Token
request('/api/login', { skipAuth: true }); // 不带 Token
Token 过期与刷新机制（进阶）
仅静态携带 Token 不够健壮，还需应对过期场景。常见策略：
- 后端返回
expires_in或 JWT 自带 exp 字段，前端可预判过期时间 - 使用 refreshToken 配合拦截器：401 时尝试静默刷新 Token，成功后重发原请求
- 避免多个并发请求同时触发刷新，可用 Promise 缓存正在刷新的请求
注意：刷新逻辑建议集中管理，不要分散在各业务接口中。
注意事项与最佳实践
- Token 存储优先选
httpOnly Cookie（更安全），若必须存在前端，避免用localStorage存敏感 Token，可考虑内存缓存 + 登录态管理 - 敏感接口（如支付、删除）建议服务端二次校验权限，不依赖前端 Token 完整性
- 登出时务必清除 Token 和相关用户状态，防止残留凭证被复用
- 开发环境可临时关闭 Token 注入，方便联调；上线前确保开关可控
