在 ApolloClient 中为每个请求设置 Authorization Headers

Question

我正在通过 Udemy 课程学习 GraphQL 和 Next.js，作者使用 apollo-boost 包中的 ApolloClient。但是@apollo/client 包是新包，我开始使用它。

作者使用 apollo-boost 的 ApolloClient 为每个请求设置凭据，如下所示：

new ApolloClient({
      request: operation => {
        operation.setContext({
          fetchOptions: {
            credentials: 'include'
          },
          headers
        })
      },
      uri: process.env.BASE_URL,
      cache: new InMemoryCache().restore(initialState || {})
})

这对我不起作用，因为@apollo/client 的 ApolloClient 中不存在请求。所以我尝试如下：

const link = new HttpLink({ uri: "http://localhost:3000/graphql", credentials: 'include' });
new ApolloClient({
      cache: new InMemoryCache().restore(initialState || { }),
      link,
    })

但凭据不适用于每个请求。我没有得到用户信息。我正在使用将登录用户信息存储在 cookie 中的护照。下面是配置通行证的 index.js 文件：

const config = require('../config/dev');
const sessison = require('express-session');
const passport = require('passport');
exports.init = (server, db) => {
  require('./passport').init(passport);
  const sess = {
    name: 'portfolio-session',
    secret: config.SESSION_SECRET,
    cookie: { maxAge: 2 * 60 * 60 * 100},
    resave: false,
    saveUninitialized: false,
    store: db.initSessionStore()
  }

  server.use(sessison(sess));
  server.use(passport.initialize());
  server.use(passport.session());
}

有人可以帮忙编写代码以向 ApolloClient 添加身份验证吗？

谢谢:)

Answer 1

从它的外观来看，您实际上并没有传递 header 带有您示例中的令牌。以第一个作者的例子传入的headers为例：

[...]
   fetchOptions: {
            credentials: 'include'
          },
          headers // <- this one
        })
      },
[...]

像您尝试的那样将其添加到请求中：

const link = new HttpLink({ 
  uri: "http://localhost:3000/graphql", 
  headers // <-- pass it here, should contain something along these lines: { Authorization: `Bearer ${token}` } or w/e
});
const client = new ApolloClient({
   cache: new InMemoryCache().restore(initialState || { }),
   link,
});

在 ApolloClient 中为每个请求设置 Authorization Headers

Set Authorization Headers in ApolloClient for each request

next.js

apollo-client