如何将Auth0的JWT token注入React-admin的Hasura data provider

解决方案 #

react-admin 无法自动完成 Auth0 JWT 向 Hasura dataProvider 的注入，需要手动调整代码实现，具体步骤如下： #

步骤1：改造 authProvider 暴露 JWT 获取方法

直接在现有 authProvider 中新增获取 JWT 的方法，同时优化原有校验逻辑，确保 token 有效性：

import authConfig from "./authConfig";
import {Auth0Client} from '@auth0/auth0-spa-js';

const auth0 = new Auth0Client({
    domain: authConfig.domain,
    client_id: authConfig.clientID,
    redirect_uri: authConfig.redirectURI,
    cacheLocation: 'localstorage',
    useRefreshTokens: true
});

export default {
    // 原有登录逻辑保持不变
    login: (url) => {
        if (typeof url === 'undefined') {
            return auth0.loginWithRedirect()
        }
        return auth0.handleRedirectCallback(url.location);
    },
    // 原有登出逻辑保持不变
    logout: () => {
        return auth0.isAuthenticated().then(function (isAuthenticated) {
            if (isAuthenticated) { 
                return auth0.logout({
                    redirect_uri: window.location.origin,
                    federated: true 
                });
            }
            return Promise.resolve()
        })
    },
    // 原有错误校验逻辑保持不变
    checkError: ({status}) => {
        if (status === 401 || status === 403) {
            return Promise.reject();
        }
        return Promise.resolve();
    },
    // 优化认证校验逻辑，自动检查token有效性
    checkAuth: async () => {
        try {
            await auth0.getTokenSilently();
            return Promise.resolve();
        } catch (e) {
            return Promise.reject();
        }
    },
    // 新增方法：获取最新JWT token，auth0会自动处理过期token的刷新
    getJwtToken: async () => {
        return auth0.getTokenSilently();
    },
    // 原有权限校验逻辑保持不变
    getPermissions: () => {
        return Promise.resolve()
    },
};

步骤2：改造 dataProvider 动态注入 JWT

不要在初始化时传入静态 token，改为每次请求前动态获取最新 token，避免 JWT 过期导致请求失败：

import buildHasuraProvider from "ra-data-hasura";
import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { setContext } from '@apollo/client/link/context';
import authProvider from './authProvider'; // 导入修改后的authProvider

export const initDataProvider = async () => {
  const httpLink = createHttpLink({
    uri: process.env.REACT_APP_GRAPHQL_URI,
  });

  // Apollo请求拦截器：每次请求前自动注入最新JWT
  const authLink = setContext(async (_, { headers }) => {
    const token = await authProvider.getJwtToken();
    return {
      headers: {
        ...headers,
        Authorization: token ? `Bearer ${token}` : "",
      }
    }
  });

  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });

  const dataProvider = await buildHasuraProvider({ client });
  return dataProvider;
};

步骤3：入口文件异步初始化 dataProvider

react-admin 支持传入 Promise 类型的 dataProvider，直接在入口组件中完成异步初始化即可：

import { Admin, Resource } from 'react-admin';
import authProvider from './authProvider';
import { initDataProvider } from './dataProvider';

const App = () => {
  return (
    <Admin 
      authProvider={authProvider} 
      dataProvider={initDataProvider()}
    >
      {/* 此处添加你的业务资源配置 */}
    </Admin>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Guy