Rails Turbo环境下render_async异步请求添加JWT请求头咨询

核心逻辑说明 #

render_async开启Turbo适配模式后，所有异步请求都会通过Turbo的fetch能力发起，只需要正确绑定Turbo的全局请求前置事件，即可统一注入JWT头。你之前尝试的turbo:load事件是页面加载完成回调，和请求头注入逻辑无关，不需要保留。

操作步骤 #

1. 调整JS事件绑定逻辑
   修改app/javascript/shopify_app/shopify_app.js文件，全局绑定turbo:before-fetch-request事件，统一为所有Turbo请求注入JWT头：

import { Turbo } from "@hotwired/turbo-rails"

// 绑定到document上，可捕获所有Turbo发起的请求，包括render_async触发的异步请求
document.addEventListener('turbo:before-fetch-request', (event) => {
  // 替换为你实际获取JWT凭证的逻辑，示例为从meta标签读取
  const jwtToken = document.querySelector('meta[name="jwt-token"]')?.content
  if (jwtToken) {
    event.detail.fetchOptions.headers['Authorization'] = `Bearer ${jwtToken}`
  }
})

2. 布局文件补充JWT存储配置
   在app/views/layouts/embedded_app.html.erb的head标签内添加meta标签，用于存储后端生成的JWT凭证：

<head>
  <!-- 其他原有head配置 -->
  <meta name="jwt-token" content="<%= 替换为你生成JWT凭证的方法调用 %>">
</head>

3. 原有render_async调用无需修改
   你现有循环内的render_async调用和turbo配置可以保持不变，不需要额外调整参数。

验证效果 #

重新部署后查看Chrome开发者工具的网络请求，render_async发起的异步GET请求会自动携带Authorization: Bearer {你的JWT}请求头，401错误即可解决。

内容的提问来源于stack exchange，提问作者kg.