在' gatsby-source-graphql ' headers选项中异步生成承载令牌

Question

我想在gatsby-source-graphq头选项中异步生成Auth token。根据文档，我可以使用异步函数来生成我的Bearer token，但我也想把它存储在某个地方。我不能使用sessionStorage或localStorage，因为我无法访问gatsby-config.js中的窗口对象。有什么办法可以做到这一点吗?下面是我的代码:

require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
});
const axios = require("axios");
const getAuthToken = async () => {
const token = btoa(
`${process.env.CTP_CLIENT_ID}:${process.env.CTP_CLIENT_SECRET}`
);
try {
const { data } = await axios.post(
// I would like to save the Auth token here
`${process.env.CTP_AUTH_URL}/oauth/token?grant_type=client_credentials`,
null,
{
headers: {
Authorization: `Basic ${token}`,
},
}
);
return `Bearer ${data.access_token}`;
} catch (err) {
console.warn(err);
}
};
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.tld",
title: "test_shop",
},
plugins: [
"gatsby-plugin-typescript",
"gatsby-plugin-postcss",
"gatsby-plugin-image",
{
resolve: "gatsby-plugin-google-analytics",
options: {
trackingId: "test_shop",
},
},
"gatsby-plugin-react-helmet",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: "gatsby-source-graphql",
options: {
// Arbitrary name for the remote schema Query type
typeName: "Merchant",
// Field under which the remote schema will be accessible. You'll use this in your Gatsby query
fieldName: "merchant",
// Url to query from
url: "https://api.europe-west1.gcp.commercetools.com/wj_trial/graphql",
// TODO: add token dynamically
headers: async () => {
return {
Authorization: await getAuthToken(),
};
},
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: "./src/images/",
},
__key: "images",
},
],
};

Answer 1

我不认为这是可以实现的，也不是一个好的选择。事实上，您正在SSR中获得令牌(当gatsby-source-graphql被触发时)，并且正如您指出的那样，您没有任何可用的工具来存储响应。当构建/部署项目时，此操作将始终由您(或您的公司/客户)触发。

在您的客户端(任何React组件)中，您知道任何AJAX操作将由用户或应用程序的任何副作用触发，在那里您控制环境，对我来说，它是您应该保存令牌，凭据等的地方，在cookie,localStorage等。

混合两种令牌是不同的情况，我不认为这是一个很好的选择，因为它自己的行为(当项目被构建时触发vs由客户端触发)。

所以，回答你的问题，你应该复制这部分代码(将它隔离到一个单独的函数中，如果需要的话调用它两次)。