如何通过URL/链接向GraphiQL传递JWT(JSON Web Tokens)完成授权

核心逻辑非常简单：只需在GraphiQL的初始化阶段解析URL携带的token参数，自动注入到请求的Authorization头即可，实现成本极低，不需要完整封装React应用。

适配场景1：CDN直接部署GraphiQL（无需前端打包） #

直接修改GraphiQL的单页HTML代码，新增URL参数解析逻辑即可，完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>GraphiQL</title>
  <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
</head>
<body style="margin: 0;">
  <div id="graphiql" style="height: 100vh;"></div>
  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/graphiql/graphiql.min.js"></script>
  <script>
    // 解析URL中的token参数
    const urlParams = new URLSearchParams(window.location.search)
    const userJwt = urlParams.get('token')

    const customFetcher = async (params) => {
      const headers = {
        'Content-Type': 'application/json'
      }
      // 存在JWT时自动注入请求头
      if (userJwt) {
        headers.Authorization = `Bearer ${userJwt}`
      }
      const res = await fetch('/你的GraphQL接口地址', {
        method: 'POST',
        headers,
        body: JSON.stringify(params)
      })
      return res.json()
    }

    // 初始化GraphiQL时传入自定义fetcher
    ReactDOM.render(
      React.createElement(GraphiQL, { fetcher: customFetcher }),
      document.getElementById('graphiql')
    )
  </script>
</body>
</html>

配置完成后，你只需要从自己的Web应用跳转到https://你的GraphiQL访问地址?token=用户的JWT字符串，即可自动完成授权头的注入，用户不需要手动填写任何headers。

适配场景2：npm包集成GraphiQL #

如果你是在现有React项目中引入的graphiql npm包，实现逻辑完全一致：

• 组件初始化时通过new URLSearchParams(window.location.search).get('token')拿到JWT
• 自定义fetcher函数，将JWT注入到请求头中传给GraphiQL组件即可

注意事项 #

• 安全风险提示：JWT直接放在URL中会被记录到浏览器历史、服务器访问日志中，仅推荐内部测试、低敏感场景使用；如果必须在生产环境使用，务必给JWT设置极短的过期时间，或配置一次失效规则
• 如果你使用的是后端框架（如Django Graphene、Spring GraphQL）内置的GraphiQL，无需自己编写完整页面，直接在框架的GraphiQL配置项中添加自定义初始化脚本，加入上述URL解析+头注入的逻辑即可生效

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