如何在hasura react admin中动态更新数据提供程序标头？

Question

我正在尝试使用 react-admin 和 hasura 数据提供程序来做一个需要身份验证的应用程序，我需要在登录成功后更改标题。现在，标题仅在我重新加载页面时更新，否则会引发此错误：

{"path":"$","error":"Malformed Authorization header","code":"invalid-headers"}

这是我当前的 app.js 代码：

{"path":"$","error":"Malformed Authorization header","code":"invalid-headers"}

这是 authprovider 的代码：

import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';
import graphql from './graphqlClient';
import Cookies from 'universal-cookie';
import { GraphQLClient } from 'graphql-request';
const cookies = new Cookies();

const LOGIN = `
    mutation($username:String!, $password:String!){
        login(username: $username, password: $password){
            token
        }
    }
`;
const ME = `
    query {
        me {
            username
        }
    }
`;

export default (type, params) => {

    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        return graphql.request(LOGIN, { username, password }).then(data => {
            const token = data.login.token;

            cookies.set("authToken", token, { path: "/", sameSite: "strict" });
            localStorage.setItem("loggedIn", true);
            //localStorage.setItem("reloaded", false);

        });
    }
    if (type === AUTH_LOGOUT) {
        cookies.set("authToken", "", { path: "/", sameSite: "strict" });
        localStorage.setItem("loggedIn", false);
        localStorage.removeItem("reloaded");
        return Promise.resolve();
    }
    if (type === AUTH_ERROR) {
        const graphqlauth = new GraphQLClient(process.env.REACT_APP_HASURA_ENDPOINT, {
            headers: {
                authorization: 'Bearer ' + cookies.get('authToken'),
            },
        })
        return graphqlauth.request(ME).then(data => { return (data.me.username) ? Promise.resolve() : Promise.reject(); }).catch(e => {
            cookies.set("authToken", "", { path: "/", sameSite: "strict" });
            localStorage.setItem("loggedIn", false);

        });

    }
    if (type === AUTH_CHECK) { 
        const graphqlauth = new GraphQLClient(process.env.REACT_APP_HASURA_ENDPOINT, {
            headers: {
                authorization: 'Bearer ' + cookies.get('authToken'),
            },
        })
        return graphqlauth.request(ME).then(data => { return (data.me.username) ? Promise.resolve() : Promise.reject(); });
        //return cookies.get('authToken') &&  cookies.get('authToken') !== "" ? Promise.resolve() : Promise.reject();
    }
    return Promise.resolve();
};

当我重新加载页面时，错误不会发生。我尝试使用状态，但似乎不可能更改标题。

Answer 1

数据提供程序的较新版本 ( 0.0.7 )ra-data-hasura添加了对 httpClient 传递动态标头的支持。

它使用react-admin的fetchUtils.fetchJson()作为HTTP客户端。因此，要将自定义标头添加到您的请求中，您只需将 fetchUtils.fetchJson() 调用包装在您自己的函数中：

const httpClient = (url, options = {}) => {
  if (!options.headers) {
      options.headers = new Headers({ Accept: 'application/json' });
  }
  // add your own headers here
  options.headers.set('Authorization', 'Bearer xxxxx');
  return fetchUtils.fetchJson(url, options);
};
const dataProvider = hasuraDataProvider('http://localhost:8080', httpClient);