Express 在Next.js、graphQL、Apollo客户端中实现身份验证

我正在尝试在前端使用NextJS和apollo客户端构建SSR应用程序，在后端使用graphql和express（graphql瑜伽）构建graphql应用程序

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

1-一旦用户在服务器验证后登录，使用当前用户数据签署JWT，然后将其发送到客户端，并将其保存在localstorage或Cookie等中

2-实现一个

loadUser（）

函数，并在（根）应用程序组件的

useffect

钩子中调用它，以便在每个组件（页面）中加载用户（如果本地存储中的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
    }
  };
};

现在我可以访问页面道具中的令牌，并可以使用apollo客户端将令牌与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\u应用程序中实现的每个页面呈现加载用户，我发现，但它不会像他在回答中提到的那样在所有组件中返回auth object或user

2-我读到，如果我设置cookies httpOnly和

凭据：“include”

我可以在每个请求中访问cookie，但它似乎不适用于apollo客户端，如果有其他方法，那就太棒了

3-阿波罗团队提供了

apollo链接上下文

，我可以使用

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}` : "",
    }
  }
});

但由于我不能访问本地存储，所以无法实现它，因为下一个运行的是服务器端，所以如果任何人都有一个实现，请考虑共享。 另外，我在搜索和阅读了大约一周后发了这条帖子，这是我最后一次向你们提问，并提前表示感谢。

通过商店获得代币 store.getState（）…path.to.your.token

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

按存储获取令牌 store.getState（）…path.to.your.token

---

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

hi，你有没有找到任何解决方案将apollo客户端与Next.js集成的最佳方法？@ShubhamKumar hi Shubham，我所做的是：1-一旦用户登录，我将JWT保存在cookie中，因为您无法访问nextJs中的localstorage。2-在您的自定义应用程序中您可以通过

ctx.req.headers.cookie

访问cookie-使用GQL和apollo，我进行了一个查询，如果有登录用户，则获取当前登录用户，并将其称为

me

我在_应用程序中发送了从该查询中获取的数据，您可以像

let me=props.meQuery

并将其发送给所有公司

检查这里嗨，你有没有找到将apollo客户端与Next.js集成的最佳解决方案？@ShubhamKumar hi Shubham，我所做的是：1-一旦用户登录，我将JWT保存在cookie中，因为你无法访问nextJs中的本地存储。2-在您的自定义应用程序中您可以通过

ctx.req.headers.cookie

访问cookie-使用GQL和apollo，我进行了一个查询，如果有登录用户，则获取当前登录用户，并将其称为

me

我在_应用程序中发送了从该查询中获取的数据，您可以像

let me=props.meQuery并将其发送给所有公司
在此处检查