如何在Hasura React Admin中动态更新数据提供者标头?

米海尔·扎敏(Mihael Zamin)

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

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

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

import React, { useEffect } from 'react';

import { Admin, Resource,  } from 'react-admin';
import Dashboard from './Dashboard';
import hasuraDataProvider from 'ra-data-hasura';
import authProvider from './authProvider';
import {Cookies} from "react-cookie";
import { AssociadoList, AssociadoShow } from "./Associado";
import portugueseMessages from 'ra-language-portuguese';
import LoginPage from "./Login";
import "./App.scss";
const ucookies = new Cookies();

const messages = {
  'pt': portugueseMessages,
};
const i18nProvider = locale => messages[locale];
const dataProvider = () => {
  const dataProvider = hasuraDataProvider(process.env.REACT_APP_HASURA_URL, { "content-type": "application/json", "Authorization": "Bearer " +  ucookies.get("authToken")});
  return dataProvider;
}
function App() {
  return (
    <Admin
      dataProvider={dataProvider()}
      authProvider={authProvider}
      dashboard={Dashboard}
      loginPage={LoginPage}
      locale="pt" i18nProvider={i18nProvider}
    >
      <Resource name="adear.associado" list={AssociadoList} options={{ label: 'Associado' }} show={AssociadoShow} />
    </Admin>
  );
}

export default App;

这是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();
};

当我重新加载页面时,不会发生错误。我试过使用状态,但似乎无法更改标题。

praveenweb

数据提供程序的较新版本(0.0.7ra-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);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Spring框架中对数据提供者层进行单元测试(插入)?

如何在Hasura上进行Postgres数据备份

如何在React Native上隐藏createStackNavigator的标头?

如何在React ui-fabric库中的GroupedList组件中自定义标头

React Styled-Components主题-提供者动态主题

如何在React JS中动态提供Image src?

如何在react-documentation中添加新的新数据提供者?

如何设置react-admin Datagrid的标头样式?

React Portal如何在其他子树中保留提供者的上下文?

如何在小部件测试中包括提供者?

如何在Flutter中更新initState函数中的状态(提供者状态)?

如何在Hasura + Postgres中的`json`列和`int`(id)列之间建立关系?

如何在hasura中列出所有创建的权限?

如何在Hasura中建立多对多插入变异?

如何在React JS中居中对齐MUIDataTable的标头

如何在提供者的值中传递数组和setArray(React,Typescript,Context)

如何从React中的父上下文提供者定义子上下文提供者中的功能?

react-redux如何获取提供者的存储对象?

如何在ChangeNotifier提供者Flutter中关闭函数

我如何在React中的Material-ui中实现下拉标头?

如何在React中渲染动态表

如何在Jukito模块中绑定命名提供者?

react-redux 中的提供者

无法从 React.Context API 获取提供者数据

如何在 Angular 中为动态组件注入提供者?

如何在 changenotifierprovider 中拥有多个提供者?

如何在hasura中為特定模式執行graphql查詢?

如何在 React 中創建使用外部上下文的類服務提供者?

如何在 DEV 和 PROD 之间设置 Hasura 迁移而不丢失数据