Next.js+Apollo调用Strapi GraphQL如何携带JWT发授权POST请求

问题背景 #

• 技术栈：Strapi、Apollo、GraphQL、Next.js 搭建电商网站
• 业务规则：完成身份认证的用户提交订单时，需在请求头携带JWT令牌完成接口授权
• 已完成配置：Order内容类型已配置与User内容类型的关联关系
• 异常表现：未携带授权信息时请求可正常运行，但无法正确传入JWT令牌，执行createOrder变更时返回禁止访问错误

测试用代码与错误返回 #

createOrder 变更（mutation）代码 #

mutation Mutation($data: OrderInput!) {
  createOrder(data: $data) {
    data {
      id
      attributes {
        name
        phone
        products {
          data {
            id
            attributes {
              price
              name
              media {
                data {
                  attributes {
                    url
                  }
                }
              }
            }
          }
        }
        status
        details
        createdAt
        user {
          data {
            attributes {
              username
            }
          }
        }
      }
    }
  }
}

错误响应内容 #

{
  "errors": [
    {
      "message": "Forbidden access",
      "extensions": {
        "error": {
          "name": "ForbiddenError",
          "message": "Forbidden access",
          "details": {}
        },
        "code": "FORBIDDEN"
      }
    },
    {
      "message": "Forbidden access",
      "extensions": {
        "error": {
          "name": "ForbiddenError",
          "message": "Forbidden access",
          "details": {}
        },
        "code": "FORBIDDEN"
      }
    }
  ]
}

分步实现方案 #

1. Apollo GraphQL Playground 携带JWT测试方法 #

打开Playground界面左下角的HTTP HEADERS配置面板，填入授权头信息，注意Bearer前缀和JWT令牌之间必须保留半角空格：

{
  "Authorization": "Bearer 替换为用户登录接口返回的有效JWT令牌"
}

填完后再执行变更即可完成带授权的接口测试。

2. Next.js 端Apollo Client 全局注入JWT #

在Apollo Client初始化配置中添加鉴权链路，自动为所有GraphQL请求注入授权头，无需在每个请求中单独配置：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

// 基础GraphQL请求链路
const httpLink = createHttpLink({
  uri: '替换为自己的Strapi GraphQL服务地址，默认格式为http://你的域名:1337/graphql',
});

// 鉴权链路：自动从本地存储读取登录后保存的JWT
const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('strapi_jwt');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    }
  }
});

// 合并链路初始化Apollo客户端
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

export default client;

在Next.js项目入口使用上述初始化的client包裹ApolloProvider即可全局生效。

3. Strapi 后台权限配置（解决FORBIDDEN错误核心步骤） #

返回两个FORBIDDEN错误的核心原因是Strapi角色权限未正确配置，按以下步骤调整：

• 登录Strapi管理后台，进入「设置」-「用户及权限插件」-「角色」页面
• 选择对应用户组（已认证用户选择Authenticated角色，公开用户按需调整）进入权限配置页
• 找到Order内容类型对应的权限项，勾选createorder（即createOrder接口）操作权限
• 同步勾选Order关联的Product、Media等内容类型的find、findone查询权限，避免关联字段查询触发权限拦截
• 保存配置后重新发起请求即可正常访问

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