Apollo请求头授权方案失效，React+GraphQL开发求助

Hey there! Let's work through that auth header issue you're facing with your React + GraphQL + Apollo app. Since your initial feed query worked perfectly before the auth setup broke, here are targeted fixes to diagnose and resolve the problem:

1. Validate Your Apollo Client Auth Configuration #

First, double-check that your Apollo Client is correctly configured to attach authorization headers to every request. It’s common for issues to pop up if the auth link isn’t set up properly or ordered correctly. Here’s a standard working setup to reference:

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

// Base HTTP link to your GraphQL server
const httpLink = createHttpLink({
  uri: 'https://your-graphql-server-endpoint.com',
});

// Auth link to inject the token into request headers
const authLink = setContext((_, { headers }) => {
  // Fetch your auth token (adjust this to match how you store it: localStorage, Context, Redux, etc.)
  const token = localStorage.getItem('authToken');
  
  // Return updated headers with authorization token
  return {
    headers: {
      ...headers,
      // Match the format your server expects (e.g., "Bearer " prefix for JWTs)
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

// Combine links: authLink runs FIRST to add headers, then httpLink sends the request
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

• Confirm your token is being retrieved correctly (check if it exists in storage/state)
• Verify the authorization header format matches what your server requires (some servers don’t use the Bearer prefix)

2. Check for Token Expiry or Storage Issues #

• Token expiration: Use a tool like jwt.io to decode your token and check its expiry date. If it’s expired, you’ll need to implement a refresh token flow or prompt the user to log back in.
• Storage inconsistencies: If you’re using localStorage/sessionStorage, open your browser’s dev tools > Application tab to confirm the token exists and hasn’t been accidentally cleared. If using a state manager (like Context or Redux), ensure the token state is being updated correctly after login.

3. Inspect Network Requests #

Open your browser’s dev tools > Network tab, then trigger a GraphQL query. Look for the request and check the Request Headers:

• If the Authorization header is missing entirely: Your auth link isn’t being applied (check link order or initialization).
• If the header exists but has an incorrect value: The token retrieval logic is faulty (e.g., pulling from the wrong storage key, or using an outdated token).

4. Ensure Link Order is Correct #

Apollo executes links in the order they’re concatenated. Make sure your authLink is concatenated before the httpLink—if you reverse them, the auth header won’t be added before the request is sent.

5. Handle Auth State Changes #

If the issue started after a login/logout action:

• Ensure that after a successful login, the new token is saved to your storage/state immediately.
• If your client needs to refresh its state after a token update, call client.resetStore() to clear cached data and reinitialize links with the new token.

内容的提问来源于stack exchange，提问作者Florian Pittet Comte Harbour