ruby-on-rails - graphql_devise 用于 Rails/Graphql/Apollo/React 中的身份验证。 "field requires authentication"错误

Question

我有一个项目，我正在使用 Graphql 和 React/Apollo 设置 Rails API。我已经将所有谷歌链接设为紫色以寻找最佳身份验证解决方案，但似乎我无法找到明确的答案。

我决定使用 graphql_devise gem，它利用了 devise 和 devise_token_auth。我更愿意找到 JWT 解决方案，但就是找不到。 (如果您有任何明显的建议，请告诉我!)

首先，我安装了一个单独的身份验证路由，但在设置 ApolloClient 时遇到了多个端点的问题。我无法弄清楚如何将与身份验证相关的请求定向到我的身份验证端点，同时让其余请求通过我的 graphql 端点。 (如果弄清楚这是最简单的解决方案，请告诉我!)相反，我按照文档的指示将身份验证路由安装在我自己的架构中:

class MyApiSchema < GraphQL::Schema

  use GraphqlDevise::SchemaPlugin.new(
    query:            Types::QueryType,
    mutation:         Types::MutationType,
    resource_loaders: [
      GraphqlDevise::ResourceLoader.new('User', only: [:login, :logout])
    ]
  )

  mutation(Types::MutationType)
  query(Types::QueryType)

并编辑 graphql_controller.rb 中的执行行:

result = MyApiSchema.execute(query, variables: variables, context: graphql_context(:user), operation_name: operation_name)

至此，在postman中运行测试查询成功。我可以在没有设置任何 header 的情况下使用 userLogin 突变访问 graphql 路由，并通过客户端、uid 和 token 获得成功响应。我的其他查询的身份验证也有效——有 header 成功，没有 header 则被拒绝。

但是当我尝试在 React 中使用 useQuery 执行相同的查询时，它不起作用。在 Chrome 的 Apollo Client Developer Tools 插件中，它也不起作用，只返回 [Object object]。通过查看“网络”选项卡中的请求，我可以看到这是同一错误的结果:“photo field requires authentication”。

当我窥探 Rails 服务器时，我可以看到正在接收 header 。我什至可以在调用 execute 方法之前在我的 graphql_controller 中手动对用户进行身份验证，所以我认为这不是 CORS 问题。我已经在 Rails 中设置了 rack-cors gem 以公开所需的 header 。

当我深入研究代码时，似乎 graphql_devise 方法 set_current_resource 无法返回我的用户。这似乎源于设计方法 set_user_by_token，但我一直无法弄清楚它失败的原因。

如果有人有任何实现此 gem 和堆栈的经验，我将非常感谢您的意见!如果您有更好的身份验证方法，我很想知道您的策略是什么。如果你能帮我解决这个...field requires authentication错误，我会永远爱你。

如果我提供的信息太多/太少，或者我的问题太含糊，我深表歉意。请让我知道我是否应该知道要在我的代码中询问/显示的具体内容。希望你能帮忙!谢谢。

Answer 1

我已经设法找到问题所在，我想我会解释一下。

在将问题追溯到 devise_token_auth gem 中的 set_user_by_token 方法后，我捆绑了 open devise_token_auth，并在其中放入了一个 byebug。这表明 @token.token 没有从 header 中正确提取。

问题是我的 header access-token 以某种方式被转换为 accessToken，因此当设计尝试使用此 key 从请求 header 设置 token 信息时，它返回了 nil。

我不知道为什么或在哪里发生这种转变。我怀疑它源自 Apollo/React 而不是 Rails，因为我的 postman 查询中的 header 没有改变。在 react 中，当我设置 header 时，它们是用 access-token 设置的，如下所示，但似乎在我的请求生命周期中的某个时刻它们被更改了。

我是如何在 React 中设置标题的:

const client = new ApolloClient({
  cache,
  link: new HttpLink({
    uri: 'http://localhost:3000/graphql',
    headers: {
      accessToken: localStorage.getItem('access-token'),
      client: localStorage.getItem('client'),
      uid: localStorage.getItem('uid')
    },
  }),
});

devise_token_auth 用于从请求中选择 header 的 key 可以在 initializers/devise_token_auth.rb 文件中更改。

我将它们编辑如下:

  config.headers_names = {:'access-token' => 'accessToken',
                         :'client' => 'client',
                         :'expiry' => 'expiry',
                         :'uid' => 'uid',
                         :'token-type' => 'token-type' }

这意味着我的前端现在可以顺利运行，并且我可以通过身份验证执行查询/更改。但是，现在在我的 postman 查询中，如果我想让它们工作，我必须将 header 更改为 accessToken。

如果能确切知道我的 React header 在什么时候更改为驼峰式命名，那就太好了，但就目前而言，它可以正常工作。如果有人遇到同样的挫折，希望这对您有所帮助!