如何使用React的Apollo客户端和graphQl进行Cookie身份验证

Question

我看不到Apollo Server和使用GraphQl和React的Apollo CLient身份验证有什么问题。

在服务器端，我有这个：

app.use(cors({
  credentials: true,
  origin: process.env.ALLOW_ORIGINS
}))
app.use(express.urlencoded({extended: true}))

//Express session: ? It provides the functionality to save session data in a storage that you choose
app.use(session({
  genid: (req) => uuidv4(),
  secret: process.env.SESSION_SECRECT,
  resave: false,
  saveUninitialized: true,
  cookie: { path: '/', httpOnly: true, secure: false, maxAge: null }
}));

// ??‍? passport init
app.use(passport.initialize())
app.use(passport.session());

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ req, res }) => {
    const contextualized = buildContext({ req, res, User })
    return contextualized
  },
  playground: {
    settings: {
      'request.credentials': 'same-origin',
    },
  },
})

并且与我的分解器在操场上工作得很好。到目前为止一切都很好。

我可以向客户端发出请求，并获得针对突变和查询的响应。但到目前为止，我无法将Cookie存储在浏览器中。神奇地，它可以在操场上工作。 为什么？

这是登录解析器的示例：

 login : async (root, {email, password}, context) => {
    const { user } = await context.authenticate('graphql-local', { email, password });
    if (!user) throw new Error ('??‍♂️ There was a problem with the user o the password ?')
    context.login(user); //?
    return { user }
  },

之后，我所有其他解析器都被包装了一个安全功能，该功能要求进行上下文身份验证：

export function secure (func, sudo = false, admin = false, patron =  false) {
    return (root, args, context) => {
        if (!context.req.user) throw new AuthenticationError('Unauthenticated')
        // sudo only
        if(sudo && rol !== 'sudo' ) throw new ForbiddenError('Protected by Super User')
        if(admin && rol !== 'admin') throw new ForbiddenError('Protected by admin')
        return func(root, args, context)
    }
}

这是我在react应用中配置Apollo客户端的方式：

const Client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.forEach(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
          ),
        );
      if (networkError) console.log(`[Network error]: ${networkError}`);
    }),
    new HttpLink({
      uri: process.env.REACT_APP_API_URL,
      credentials: 'same-origin'
    })
  ]),
  cache: new InMemoryCache()
});

问题出在客户端，因为身份验证在PlayGround中起作用，但在反应中不起作用。我该怎么办？

客户：https://github.com/josuevalrob/CLE 服务器：https://github.com/josuevalrob/cle_api

检查任何请求的响应：