在Next.js，graphQL，Apollo客户端

如何解决在Next.js，graphQL，Apollo客户端

我试图在前端使用NextJS和apollo-client来构建SSR应用程序，并在后端使用（graphQL Yoga）使用express来实现graphql。

我来自客户端渲染背景，在身份验证方面，它比SSR更简单。在常规的客户端渲染中，我对用户进行身份验证的方法如下：

1-服务器验证后用户一旦登录，请使用当前用户数据对JWT进行签名，然后将其发送到客户端，并将其保存在本地存储或cookie中，等等。

2-实现一个loadUser()函数，并在（根）App组件的useEffect钩子中对其进行调用，以在本地存储中的JWT有效的情况下将用户加载到每个组件（页面）中。

3-如果JWT不存在或无效，则只需将用户返回null并重定向到登录页面即可。

所以在Next.js中，我知道我们无法访问localstorage，因为它可以在服务器端工作，所以我们只是将令牌保存在cookie中，而我实现的方法很痛苦，我想知道是否有一种更简单的方法，我的方法是这样的： 1-一旦用户登录，他就会调用登录突变，该突变在req标头中设置一个cookie，并返回用户和我想要的任何数据。 2-在需要身份验证的每个页面中，我需要从cookie中获取令牌以将其发送回标头，而我在getInitialProps()或getServerSideProps()中这样做，会导致都运行服务器端并可以访问像这样在标题中请求Cookie：

export const getServerSideProps = async ctx => {
  const apolloClient = initializeApollo();

  // get the cookies from the headers in the request object
  const token = ctx.req.headers.cookie ? ctx.req.headers.cookie : null;
  return {
    props: {
      initialApolloState: apolloClient.cache.extract(),token: token
    }
  };
};

现在我可以访问页面道具中的令牌，并且可以使用我的阿波罗客户端将令牌与req标头一起发送回去，

let getUserQuery = await apolloClient.query({
    query: GET_USER_QUERY,variables: { id: ctx.params.id },context: { headers: { token: token } }
  });

现在我可以访问服务器端请求中的令牌，例如req.headers.token

我想实现的目标：

1-有一种更简单的实现loadUser()的方式，可以向用户加载我可以在next.js custom _app中实现的所有页面呈现，我发现this answer但未返回auth他回答中提到的所有组件中的对象或用户。

2-我读到如果我将cookie设置为httpOnly和credentials: "include"，我可以在每个请求中访问cookie，但是似乎它不适用于apollo客户端，如果有替代方法，那会很棒方法。

3-阿波罗团队提供了apollo-link-context，我可以使用setContext()在每个请求的标头中发送令牌或任何值，如下所示：

const authLink = setContext((_,{ headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,authorization: token ? `Bearer ${token}` : "",}
  }
});

但是由于我没有访问本地存储的权限，所以我无法实现它，导致下次运行服务器端，因此，如果有人对此实现，请考虑共享。

PS。我搜索并阅读了大约1周后就创建了这个主题，这是我最后的问问你们的方法，并预先感谢。

解决方法

通过商店获取令牌 store.getState()..path.to.your.token

问题是当盲人改变时令牌没有完全更新，我正在寻找解决方案。