React GraphQL 和 ApolloServer：未处理的拒绝（错误）：GraphQL 错误：在初始化之前无法访问“post”答案

【问题标题】：React GraphQL & ApolloServer: Unhandled Rejection (Error): GraphQL error: Cannot access 'post' before initializationReact GraphQL 和 ApolloServer：未处理的拒绝（错误）：GraphQL 错误：在初始化之前无法访问“post”
【发布时间】：2021-03-17 11:05:12
【问题描述】：

我有一个简单的社交媒体应用程序，它使用：GraphQL 和 ApolloServer 作为后端，用户可以在其中点赞帖子。但是当未登录的用户尝试点赞按钮时会出现错误，并出现一个名为：

未处理的拒绝（错误）：GraphQL 错误：必须提供授权标头

发生。

这是 likePost 变异的代码...

    async likePost(_, { postId }, context) {
  const { username } = checkAuth(context);

  const post = await Post.findById(postId);
  if (post) {
    if (post.likes.find((like) => like.username === username)) {

      post.likes = post.likes.filter((like) => like.username !== username);
    } else {
      post.likes.push({
        username,
        createdAt: new Date().toISOString()
      });
    }

    await post.save();
    return post;
  } else throw new UserInputError('Post not found');
}

这是检查授权文件的代码。

   const { AuthenticationError } = require('apollo-server');

const jwt = require('jsonwebtoken');
const { SECRET_KEY } = require('../config');

module.exports = (context) => {
  // context = { ... headers }
  const authHeader = context.req.headers.authorization;
  if (authHeader) {
    // Bearer ....
    const token = authHeader.split('Bearer ')[1];
    if (token) {
      try {
        const user = jwt.verify(token, SECRET_KEY);
        return user;
      } catch (err) {
        throw new AuthenticationError('Invalid/Expired token');
      }
    }
    throw new Error("Authentication token must be 'Bearer [token]");
  }

throw new Error('必须提供授权标头'); };

我该如何解决这个问题，以便在未注册用户尝试点赞帖子时不会出现错误？

【问题讨论】：

标签： javascript reactjs authentication graphql react-apollo

【解决方案1】：

如果您参考此视频来构建社交媒体应用程序 (https://www.youtube.com/watch?v=n1mdAPFq2Os&ab_channel=freeCodeCamp.org)。由于 LikeButton.js 文件中的 Button 组件，您可能会收到此错误。

<Button as='div' labelPosition='right' onClick={likePost}>
     <CustomPopup content={liked? 'unlike post': 'like post'}>
          {likeButton} 
     </CustomPopup>
</Button>

此 Button 组件将执行您指定的 onClick 方法（不是 {likeButton} 中指定的 '/login' 路径），该方法正在执行数据库的突变，并且需要授权标头来执行此操作。因此，当你没有登录（没有授权头）但点击like按钮时，会报错。

这是我的修改方式：

return(
        user? (
            <Button as='div' labelPosition='right' onClick={likePost}>
                <CustomPopup content={liked? 'unlike post': 'like post'}>
                {likeButton} 
                </CustomPopup>
            </Button>
        ):(
            <Button labelPosition='right' as='a' href='/login'>
                <CustomPopup content={liked? 'unlike post': 'like post'}>
                {likeButton} 
                </CustomPopup>
            </Button>
        )
        
);

【讨论】：