React嵌入Apache Superset时提示‘Invalid token specified’错误如何解决？

问题 #

我尝试将Apache Superset嵌入React应用，已完成以下配置：

• 在superset_config.py中添加：FEATURE_FLAGS = {..., "EMBEDDED_SUPERSET": True}
• 在Superset嵌入仪表盘设置中，将允许域名设为http://localhost:3000
• 创建用户myUser，分配Public、Gamma角色
• React项目执行npm i @superset-ui/embedded-sdk安装依赖
• 编写的App.js代码如下：

import { useEffect } from "react"
import { embedDashboard } from "@superset-ui/embedded-sdk"
import "./App.css"

function App() {
  const getToken = async () => {
return {
    "token": "token_Value"              //从Insomnia获取
       }
    }
  useEffect(() => {
    const embed = async () => {
      await embedDashboard({
        id: "dashboardId", // Superset嵌入UI提供的ID
        supersetDomain: "http://localhost:8088",
        mountPoint: document.getElementById("dashboard"), // 渲染iframe的HTML元素
        fetchGuestToken: () => getToken(),
        dashboardUiConfig: {
          hideTitle: true,
          hideChartControls: true,
          hideTab: true,
        },
      })
    }
    if (document.getElementById("dashboard")) {
      embed()
    }
  }, [])

  return (
    <div className="App">
      <h1>How to Embed Superset Dashboard into React</h1>
      <div id="dashboard" />
    </div>
  )
}

export default App

通过Insomnia获取token的步骤：

1. POST请求http://localhost:8088/api/v1/security/login，获取access_token
2. GET请求http://localhost:8088/api/v1/security/csrf_token，携带access_token获取csrf_token
3. POST请求http://localhost:8088/api/v1/security/guest_token，获取token并填入App.js

执行npm start后出现错误：

ERROR

Invalid token specified
./node_modules/jwt-decode/build/jwt-decode.esm.js
./node_modules/@superset-ui/embedded-sdk/lib/guestTokenRefresh.js

修复方案 #

1. 验证Guest Token的有效性 #

• 用jwt-decode工具解析获取到的Guest Token，检查：
  • token是否完整，无换行、空格或多余字符
  • exp字段（过期时间）是否未过期，确保当前时间早于exp值
  • iss字段是否与Superset域名http://localhost:8088完全匹配

2. 检查Guest Token生成的请求参数 #

调用/api/v1/security/guest_token时，请求体必须包含正确的权限配置，示例请求体如下：

{
  "user": {
    "username": "myUser",
    "first_name": "My",
    "last_name": "User"
  },
  "resources": [
    {
      "type": "dashboard",
      "id": "你的仪表盘ID"
    }
  ],
  "rls": []
}

• 确认resources中的id与嵌入代码里的dashboardId完全一致
• 确保myUser用户对目标仪表盘有查看权限（Gamma角色需关联对应数据源权限）

3. 修正fetchGuestToken的返回格式 #

SDK要求fetchGuestToken返回的token为纯字符串，调整getToken函数：

const getToken = async () => {
  // 建议替换为后端接口请求逻辑，避免前端暴露敏感认证信息
  const res = await fetch('/your-backend-api/get-guest-token');
  const data = await res.json();
  // 直接返回token字符串，或返回{ token: data.token }格式均可
  return data.token;
}

4. 排查跨域与Cookie配置 #

• 在superset_config.py中设置SESSION_COOKIE_SAMESITE = "Lax"（跨域场景可设为"None"）
• 若Superset用HTTPS，需开启SESSION_COOKIE_SECURE = True
• 确认嵌入允许列表中的http://localhost:3000无拼写错误

5. 匹配SDK与Superset版本 #

• 检查@superset-ui/embedded-sdk版本与Superset服务器版本是否同大版本（如Superset 2.x对应SDK 2.x）
• 尝试更新SDK到兼容版本：npm update @superset-ui/embedded-sdk

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