You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Node.js中如何让普通用户在请求头中自动携带JWT?

自动在浏览器请求头携带JWT的实现方案

针对你提到的普通用户无需手动操作,登录后自动在请求头添加authorization: Bearer [access_token]的需求,以下是几种落地可行的方案:

1. 前端全局请求拦截(推荐)

这是最贴合JWT客户端存储设计的方案——登录成功后把JWT存在localStorage或sessionStorage里,然后通过拦截所有前端发起的请求,自动在请求头中注入token。

原生Fetch封装示例

// 封装带token的fetch方法
const authenticatedFetch = (url, options = {}) => {
  const accessToken = localStorage.getItem('access_token');
  // 合并请求头,优先保留传入的headers,再添加Authorization
  const headers = {
    ...options.headers,
    ...(accessToken ? { 'Authorization': `Bearer ${accessToken}` } : {})
  };
  return fetch(url, { ...options, headers });
};

// 业务中直接使用封装后的方法
authenticatedFetch('/api/user/info')
  .then(res => res.json())
  .then(data => console.log('用户信息:', data));

Axios全局拦截器示例(Vue/React常用)

import axios from 'axios';

// 创建axios实例
const apiClient = axios.create({ baseURL: '/api/v1' });

// 添加请求拦截器,自动注入token
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.get('/orders')
  .then(res => console.log('订单列表:', res.data));

这种方式完全由前端管理token的存储与注入,不需要依赖浏览器的Cookie机制,完全符合JWT“客户端自主携带token”的设计初衷。

2. 关于Cookie存储的澄清:并非违背初衷

很多人对Cookie存JWT有误解,其实Cookie本身就是一种客户端存储介质,只是使用场景不同:

  • 如果后端把JWT写入Cookie,浏览器会自动将Cookie附带到同域请求中,但默认不会放到Authorization头里。这时候需要后端适配:从Cookie中读取JWT而非请求头。
  • 若你坚持要使用Authorization头,也可以结合Cookie+前端拦截:登录后后端将JWT写入非HttpOnly的Cookie,前端通过document.cookie读取token,再用上述的请求拦截器注入到请求头。不过这种方式多此一举,不如直接存在localStorage。
  • Cookie的优势是支持HttpOnly和Secure属性,能有效防范XSS攻击;劣势是受同源策略限制,跨域请求需要额外配置withCredentials。而localStorage的优势是跨域更灵活,但存在XSS被盗取的风险,需要你根据业务场景权衡。

3. SSR场景的特殊处理

如果你的项目是Next.js、Nuxt.js这类服务端渲染框架,登录后可以将JWT存储在服务端会话中,或者在渲染页面时将token注入到全局变量,前端初始化时读取该变量并存入localStorage,再通过请求拦截器自动携带:

<!-- 服务端渲染时注入全局变量 -->
<script>
  window.__AUTH_TOKEN__ = '<%= serverSideToken %>';
</script>
// 前端初始化时存储token
if (window.__AUTH_TOKEN__) {
  localStorage.setItem('access_token', window.__AUTH_TOKEN__);
}

内容的提问来源于stack exchange,提问作者Max

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.07 10:40:53