Apollo客户端未在Nextjs Lamda中发送JWT承载令牌

JavaScript React.js

梅

2020-03-23

TLDR

标头authorization未随阿波罗发送。这导致You do not have the appropriate capabilities to perform this action

const apolloClient = ({ cookies: { token = null }, headers }) => {
  const authLink = setContext(_ => {
    console.info(token) //correct tokens
    return {
      headers: {
        ...headers,
        authorization: `Bearer ${token}`,
      },
    }
  })

  return new ApolloClient({
    link: ApolloLink.from([
      onError(({ graphQLErrors, networkError }) => {
          console.error(graphQLErrors, networkError)
      }),
      authLink.concat(
        createHttpLink({
          uri: graphQL,
          credentials: 'same-origin',
          fetch: fetch,
        })
      ),
    ]),
    cache: new InMemoryCache(),
  })
}

长版

我需要在我的一个nextjs lamba文件中进行身份验证，该文件现在位于其中/pages/api/*

我目前有一个apollo.serverless.js文件，该文件被导入到pages/api/users/update/role/[userId].js我进行数据库交互的位置。

这对我来说有点混乱。我不确定这是唯一的方法，但这是我的大脑带给我的。我正在传递req intoapollo.serverless.js`，以便可以访问cookie内的不记名令牌。

这可能很简单，就像我的apollo.client设置不正确一样。

我正在直接测试链接，http://localhost:3000/api/users/update/role/dXNlcjoxMTg=因为条纹webhook将使用查询参数直接访问此URL。

pages / api / users / update / role / [userId] .js

import { useQuery, useMutation } from '../../../../../lib/apollo/apollo.serverless'
import { updateMemberRole, allUsers } from '../../../queries/users'

export default async (req, res) => {
  let data
  try {
    const mutationInfo = await useMutation(
      {
        mutation: updateMemberRole,
        variables: {
          userId: req.query.userId,
        },
      },
      req
    )
    data = mutationInfo.data
  } catch (err) {
    data = err
  }
  res.status(200).json({ data })
}

标头以[userId]发送

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,en-GB;q=0.8,fr;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Cookie: analyticsCookieAccepted=1; analyticsCookieNoticeClosed=1; _ga=GA1.1.2044509544.1574855120; wordpress_test_cookie=WP+Cookie+check; OPTOUTMULTI=0:0%7Cc4:0%7Cc3:0%7Cc2:0; wp-settings-45=editor%3Dhtml%26libraryContent%3Dbrowse%26imgsize%3Dfull; wp-settings-time-45=1575018303; theme=light; wp-settings-time-1=1575496501; utag_main=v_id:016eacdb7ad1001fa3af49cf1fec01069001606100fb8$_sn:18$_se:1$_ss:1$_st:1575891251585$ses_id:1575889451585%3Bexp-session$_pn:1%3Bexp-session; wordpress_logged_in_86a9106ae65537651a8e456835b316ab=glasshousegames%7C1578351721%7CtL4KMHIW7tTAUuCzUOJd8r6Mu5buST9mheH2tn9WFQs%7C593e133b11f6c0745f577e32d66db0cf1ccfa012504f9015fc64c515d2df77d2; token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3QiLCJpYXQiOjE1NzgwNTgyOTIsIm5iZiI6MTU3ODA1ODI5MiwiZXhwIjoxNTc4NjYzMDkyLCJkYXRhIjp7InVzZXIiOnsiaWQiOiIxMTgifX19.iMSh4KjuON3otpOqO3TXpYAh2bQYu48sqm9pzsgeBis
Host: localhost:3002
Pragma: no-cache
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

apollo.serverless.js

import dotenv from 'dotenv'
import { fetch } from 'cross-fetch/polyfill'
import { createHttpLink } from 'apollo-link-http'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context'
import { onError } from 'apollo-link-error'
import { ApolloLink } from 'apollo-link'
import { graphQL } from 'app.config'
import ApolloClass, { sortParams } from '~/lib/apollo/apollo.class'

dotenv.config()

const apolloClient = ({ cookies: { token = null }, headers }) => {
  const authLink = setContext(_ => {
    return {
      headers: {
        ...headers,
        authorization: `Bearer ${token}`,
      },
    }
  })

  return new ApolloClient({
    link: ApolloLink.from([
      onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors)
          graphQLErrors.forEach(({ message, locations, path }) => console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`))
        if (networkError) console.log(`[Network error]: ${networkError}`)
      }),
      authLink.concat(
        createHttpLink({
          uri: graphQL,
          credentials: 'same-origin',
          fetch: fetch,
        })
      ),
    ]),
    cache: new InMemoryCache(),
  })
}

export const useQuery = async function(query) {
  const { options = {} } = sortParams([...arguments])
  const { loading, data: queryData, error, ...props } = await apolloClient.query({
    query,
    ...options,
  })
  let transformData = {}

  if (queryData) transformData = new ApolloClass(queryData).start()
  return {
    queryData,
    error,
    loading,
    data: transformData,
  }
}

export const useMutation = async function(mutation, req) {
  const { data } = await apolloClient(req).mutate(mutation)
  return { data }
}

错误

// 20200106132714
// http://localhost:3002/api/users/update/role/dXNlcjoxMTg=

{
  "data": {
    "graphQLErrors": [
      {
        "message": "You do not have the appropriate capabilities to perform this action",
        "category": "user",
        "locations": [
          {
            "line": 2,
            "column": 3
          }
        ],
        "path": [
          "updateUser"
        ]
      }
    ],
    "networkError": null,
    "message": "GraphQL error: You do not have the appropriate capabilities to perform this action"
  }
}

So I believe the problem is that my headers are not being sent, as I cannot see them in the headers detailed here , I can not see them in my headers when looking http://localhost:3000/api/users/update/role/cm9sZTpzdGFuZGFyZA==

It is worth mentioning I am using GraphQL and wp-GraphQL with JWT as my auth token. And handling the JWT tokens withJWT Authentication for WP REST API. The reason I am not drawing more attention to this is that I cannot see any Bearer SomeToken in my headers, so I am sure once the token is sent over everything work. JWT is correctly working in all my interactions from the cookie.

.htaccess

RewriteCond %{HTTP:Authorization} ^(.)
RewriteRule ^(.) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

<ifmodule mod_headers.c="">
    # SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=$1
    SetEnvIf Origin "http(s)?://(www\.)?(localhost|now.sh|dev.domain1.games)$" ORIGIN_SUB_DOMAIN=$1
    Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
    Header set Access-Control-Allow-Methods: "*"
    Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization, Content-Disposition"
</ifmodule>

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
</IfModule>

第3039篇《Apollo客户端未在Nextjs Lamda中发送JWT承载令牌》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
番长 2020.03.23

因此，我正在研究这个问题，并注意到他们的中间件使用了不同的措辞，也许只是更明确的表达，但是...我将对此进行探讨...

const authLink = new ApolloLink((operation, forward) => {
  operation.setContext({
     headers: {
       ...headers,
       authorization: `Bearer ${token}`,
     }});
  return forward(operation);
});
宝儿 2020.03.23

将此添加到您的.htaccess文件

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android