使用 NextJs 将 JWT 令牌传递到 Apollo 上下文

Posted 2023-03-10

【中文标题】使用 NextJs 将 JWT 令牌传递到 Apollo 上下文

【英文标题】：Passing JWT Token into Apollo Context with NextJs

【发布时间】：2021-11-29 17:49:06

【问题描述】：

我在使用 NextJs 将我的 jwt 令牌传递到我的 Apollo 服务器的上下文中时遇到了一些问题。在我使用 React 和 Express 之前，我能够像这样在标头中传递令牌：

const client = new ApolloClient(
  request: (operation) => 
    const token = localStorage.getItem('id_token');
    operation.setContext(
      headers: 
        authorization: token ? `Bearer $token` : '',
      ,
    );
  ,
  uri: '/graphql',
);

但是，现在我似乎在设置标头中的令牌时遇到了一些问题，因为在 Next 运行此代码时未定义 localStorage。我找到了使用 Next 设置 JWT、使用 Apollo 设置 Next 和使用 JWT 设置 Apollo 的教程。不幸的是，对于 Next、Apollo 和 JWT 的具体组合以及设置授权标头，我还没有找到太多帮助。

有什么建议吗？

【参考方案1】：

对于遇到此问题的其他人，我已经找到了可行的解决方案。

解决方案来自这里：https://lyonwj.com/blog/grandstack-podcast-app-next-js-graphql-authentication

token可以通过useContext存储在app state中，而不是使用localStorage。这样做的缺点是“登录”仅在您在页面上时存在。

可以通过将最新令牌的副本保存到数据库并在您重新访问该站点时查找它来解决此问题。如果未过期，则说明您已登录。否则，提示用户登录。