“[GraphQL 错误]：消息：函数权限被拒绝”在 headers 中使用 JWT

Question

问题

不需要授权的查询成功，但是需要JWT授权的查询失败。

错误

在浏览器控制台中，我收到以下错误消息：

[GraphQL error]: Message: permission denied for function get_account_info, Location: [object Object], Path: getAccountInfo

这是我在服务器控制台中得到的错误：

1 error(s) as guest in 101.18ms :: { getAccountInfo { username interface native customNative tutorial email __typename } }

错误显示 as guest 意味着角色设置不正确（否则会显示 as loggedin）。我很确定这个错误不是由于 SQL 方面的原因，而是在我的 JS 代码中，但我在下面提供了一些 SQL 代码以防万一。

要求

我安装了 GraphQL Developer Tools 并看到这是在请求中发送的内容：

请求

请求URL：http://localhost:3000/graphql
方法：POST
HTTP 版本：HTTP/1.1
Headers:
- 来源：http://localhost:3000
- Accept-Encoding: gzip, deflate, br
- 主持人：localhost:3000
- Accept-Language: pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7,fr;q=0.6,lt;q=0.5 ,es;q=0.4
- User-Agent：Mozilla/5.0（Macintosh；英特尔MacOS X 10_11_3）AppleWebKit/537。 36（KHTML，如 Gecko）Chrome/73.0.3683.86 Safari/537.36
- content-type: application/json
- 接受：/
- 推荐人：http://localhost:3000/login
- Cookie：授权=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9。eyJjaWQiOjgsInN1YiI6InN0YXNAbXJzd29yZHNtaXRoLmNvbSIsImlzcyI6Imh0dHA6Ly9td3MtbWxhLmNvbSIsInBlcm1pc3Npb25zIjoxLCJpYXQiOjE1MjIwNzA4NzYsImV4cCI6MTUyMjY3NTY3Nn0.cXoy-SxSc5YVJ36lSmUoKAYU8KpZsZaFOS-xqcmbKPg
- 连接：keep-alive
- Content-Length: 179
- DNT: 1

请注意 Cookie 具有 授权=[某些令牌]。 这是否意味着没有授权header 因为它出于某种原因住在Cookie 下？如果是这样，我该如何正确设置 header？ 或者还有其他我做错的地方吗？

SQL代码

我很确定 SQL 没问题，但这里是为了以防万一。

JWT 代

CREATE FUNCTION private.generate_jwt_for_user(username text)
    RETURNS json_web_token
    LANGUAGE plpgsql
    STABLE
    AS $$
        DECLARE
            n_moderator bigint;
        BEGIN
            SELECT count(*) INTO n_moderator
               FROM private.moderator
               WHERE account = username;

            IF n_moderator = 0
            THEN
                RETURN ('loggedin', username)::json_web_token; -- x::Y means cast x to type Y
            ELSE
                RETURN ('moderator', username)::json_web_token;
            END IF;
        END;
    $$;

get_account_info

CREATE FUNCTION public.get_account_info()
    RETURNS private.account_info
    LANGUAGE SQL
    SECURITY DEFINER
    STABLE
    AS $$
        SELECT *
        FROM private.account_info
        WHERE username = current_setting('jwt.claims.username')
    $$;

JavaScript代码

main.js

// Meteor startup script. Runs reactRoutes, and puts the result in the 'content' div in index.html.

import { Meteor } from 'meteor/meteor'
import { render } from 'react-dom'
import Routes from './routes'
import React from 'react'
import ApolloClient from 'apollo-boost'
import { HttpLink } from 'apollo-link-http'
import { ApolloLink, from } from 'apollo-link'
import { ApolloProvider } from 'react-apollo'

// Connect to the database using Apollo
// Add middleware that adds a Json Web Token (JWT) to the request header

const httpLink = new HttpLink({ uri: '/graphql' });

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  const token = localStorage.getItem('token')
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      authorization: 'Bearer ' + token || null,
    } 
  }));

  return forward(operation);
})

const client = new ApolloClient({
  link: from([
    authMiddleware,
    httpLink
  ]),
});

// <ApolloProvider> allows React to connect to Apollo
// <Routes> allows client-side routing
// The rendered page inserted into the HTML under 'content'
Meteor.startup(() => {
    render(
        <ApolloProvider client={client}>
            <Routes/>
        </ApolloProvider>,
        document.getElementById('content'))
})

app.js

对于偶尔带有 TODO 注释的长代码表示歉意，这项工作仍在进行中。

import React from 'react'
import jwtDecode from 'jwt-decode'
import { withApollo, graphql } from 'react-apollo'
import gql from 'graphql-tag'
import Nav from './auxiliary/nav'
import Translate from 'react-translate-component'

class UserAppBody extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            activeLanguageId: null
        }
    }

    setLanguage(langId) {
        this.setState({
            activeLanguageId: langId
        })
    }

    render() {
        let native = null
        let username = false
        // TODO: remove all userId references in app
        let tutorial = false
        if (this.props.accountInfo) {
            console.log("jwt: " + localStorage['token'])
            if (this.props.accountInfo.loading) { return <Translate component="div" content="loading.loading" /> }
            console.log(this.props.accountInfo)
            username = this.props.accountInfo.getAccountInfo.username
            tutorial = this.props.accountInfo.getAccountInfo.tutorial
            native =   this.props.accountInfo.getAccountInfo.native
        }

        return (
            <div id="app-container">
                <Nav callbackLogOut={this.props.logOut} username={username} />
                {/* Insert the children according to routes.jsx (this.props.children), along with the childrens' props.
                username should come from query due to being wrapped by graphql for wrapped case; otherwise username is bool: false. */}
                {React.cloneElement(
                    this.props.children, 
                    {
                        username: username,
                        hasSeenTutorial: tutorial,
                        native: native,
                        activeLanguageId: this.state.activeLanguageId, 
                        callbackLanguage: this.setLanguage.bind(this),
                        callbackUser: this.props.setUser,
                        callbackLogOut: this.props.logOut
                    }
                )}
            </div>
        )
    }
}

// UserAppBody will be wrapped in AppBody if user is logged in, this setup comes before the wrapping
// Calling graphql on this turns it into a function which returns a React element (needed below)
const accountInfoQuery = gql`query{
    getAccountInfo {
        username
        interface
        native
        customNative
        tutorial
        email
    }
}`

const accountInfoQueryConfig = {
    name: 'accountInfo'
}
const SignedInAppBody = graphql(accountInfoQuery, accountInfoQueryConfig)(UserAppBody)


class AppBody extends React.Component {
    constructor(props) {
        super(props)
        const raw_jwt = localStorage.getItem('token')
        this.state = {
            isLoggedIn: !!raw_jwt // true if there is a jwt in local storage, false otherwise
        }
    }

    setUser(raw_jwt) {
        const jwt = jwtDecode(raw_jwt)

        // Check if the token has expired
        // Note that getTime() is in milliseconds, but jwt.exp is in seconds
        const timestamp = (new Date).getTime()
        if (!!jwt && timestamp < jwt.exp * 1000) {
            // If the token is still valid:
            // Store the token in memory, to be added to request headers
            localStorage.setItem('token', raw_jwt)
            // Set the state, to change the app
            this.setState({
                isLoggedIn: true
            })
            // Automatically refresh the token
            this.refreshTimer = setInterval(this.refresh, 1000*60*20)  // Refresh every 20 minutes
            console.log('timer set up')

        } else {
            // If the token is no longer valid, log out to clear information
            this.logOut()
        }
    }

    logOut() {
        // Clear everything from setUser (state, memory, refreshing)
        localStorage.removeItem('refreshToken')
        localStorage.removeItem('token')
        clearInterval(this.refreshTimer)
        console.log('logging out')
        // second argument is a callback that setState will call when it is finished
        this.setState( { isLoggedIn: false }, this.props.client.resetStore() )
    }

    refresh() {
        // Get a new token using the refresh code
        this.props.refresh({variables: {input: {refreshToken: localStorage.getItem('refreshToken')}}})
        .then((response) => {
            // Store the new token
            const raw_jwt = response.data.refresh.jsonWebToken
            localStorage.setItem('token', raw_jwt)
        }).catch((error) => {
            // If we can't connect to the server, try again
            if (error.networkError) {
                console.log('network error?') //TODO
                //this.refresh()
            } else { //TODO
                // If we connected to the server and refreshing failed, log out
                console.log('error, logging out')
                console.log(error)
                this.logOut()
            }
        })
    }

    componentWillMount() {
        const raw_jwt = localStorage.getItem('token')
        if (!!raw_jwt) {
            console.log('found json web token, running setUser as App compenent mounts')
            this.setUser(raw_jwt)
            this.refresh()
        }
    }

    render() {
        let AppBodyClass

        if (this.state.isLoggedIn) {
            AppBodyClass = SignedInAppBody
        } else {
            AppBodyClass = UserAppBody
        }
        return <AppBodyClass children={this.props.children} setUser={this.setUser.bind(this)} logOut={this.logOut.bind(this)} />
    }
}

const refresh = gql`mutation($input:RefreshInput!) {
    refresh(input:$input) {
        jsonWebToken
    }
}`
const refreshConfig = {
    name: 'refresh'
}

export default withApollo(graphql(refresh, refreshConfig)(AppBody))

Answer 1

Note that Cookie has authorization=[some token]. Does this mean that there is no authorization header because it is living under Cookie for some reason? If so, how do I set the header correctly? Or is there anything else that I'm doing wrong?

这很奇怪，但您的客户端代码似乎是正确的；尝试使用不同的开发工具来查看实际发送的内容。 "Bearer"这个词也被去掉了，很奇怪。

The fact that the error says as guest means that the role hasn't been set correctly (otherwise it would say as loggedin). I'm fairly sure this error isn't due to something on the SQL side, but rather in my JS code, but I've provided some SQL code below just in case.

将JWT token放入jwt.io工具，可以看到token的body是：

{
  "cid": 8,
  "sub": "s[AN EMAIL ADDRESS]m",
  "iss": "http://mws-mla.com",
  "permissions": 1,
  "iat": 1522070876,
  "exp": 1522675676
}

这缺少 'role' 声明，因此 PostGraphile 不会尝试更改角色。然而，这似乎与您在 PostgreSQL 中生成的 JWT 不一致，所以我怀疑这个 cookie 具有误导性。我认为您根本没有发送授权 header。

尝试调试您的身份验证中间件：

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  const token = localStorage.getItem('token')
  operation.setContext(context => {
    const ctx = {
      ...context,
      headers: {
        ...context.headers,
        authorization: 'Bearer ' + token || null,
      } 
    };
    console.log(ctx);
    return ctx;
  });

  return forward(operation);
})

（注意：您之前只在上下文中保留 headers，在上面的代码中，我现在也传递了其他属性。）

Answer 2

@Benjie 是对的，中间件没有工作，所以没有添加 header。问题是 apollo-boost 不允许 link 选项。 ApolloClient 应该从 apollo-client 导入。

“[GraphQL 错误]：消息：函数权限被拒绝”在 headers 中使用 JWT

"[GraphQL error]: Message: permission denied for function" using JWT in headers

postgresql

graphql

react-apollo

apollo-client

postgraphile

问题

错误

要求