如何在ReactQL中为所有GraphQL后端请求添加Authorization请求头？

我明白你的困惑——Apollo官方的示例是通用的，但ReactQL有自己的项目结构，不过实现思路其实是相通的。下面是在ReactQL中给所有GraphQL请求添加Authorization请求头的具体方法：

1. 定位Apollo Client配置文件 #

ReactQL项目里，Apollo Client的初始化代码一般放在src/server/apollo.js（服务端渲染场景）或者src/client/apollo.js里，先找到这个文件里创建ApolloClient的代码段。

2. 引入必要的Apollo工具 #

如果还没引入，先把setContext和createHttpLink加进来：

import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';

3. 构建认证链接并拼接 #

修改原有的Client配置逻辑，创建认证链接并和基础的HTTP链接拼接：

// 第一步：创建指向远程后端的基础HTTP链接
const httpLink = createHttpLink({
  uri: 'https://your-remote-graphql-endpoint.com/graphql', // 替换成你的实际后端地址
});

// 第二步：创建认证链接，自动注入Authorization头
const authLink = setContext((_, { headers }) => {
  // 从localStorage获取已保存的token
  const token = localStorage.getItem('token');
  // 返回更新后的请求头，确保不覆盖原有header
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : null,
    },
  };
});

// 第三步：把认证链接和基础HTTP链接拼接，确保每个请求都经过认证处理
const link = authLink.concat(httpLink);

// 最后：初始化Apollo Client时使用拼接后的link
const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  // 保留你原有的其他配置项
});

4. 针对服务端渲染（SSR）的特殊处理 #

如果你的ReactQL项目是SSR模式，要注意localStorage在服务端环境是不存在的，这时候需要从请求的Cookie里获取token，或者区分环境处理：

const authLink = setContext((_, { headers, req }) => {
  let token;
  // 判断是否在客户端环境
  if (typeof window !== 'undefined') {
    token = localStorage.getItem('token');
  } else {
    // 服务端环境，从请求的Cookie中读取token（需要确保Cookie已传递）
    token = req?.cookies?.token;
  }
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : null,
    },
  };
});

小提示 #

• 记得根据你的后端认证要求调整authorization头的格式，比如有些后端不需要Bearer前缀，直接用token ${token}即可。
• 如果token是从其他地方获取的（比如Redux store），只需要把localStorage.getItem('token')替换成对应的取值逻辑就行。

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