React-Admin对接Spring Boot：JWT鉴权与数据渲染问题排查

问题背景 #

使用React-Admin框架，后端为Spring Boot接口。通过Postman携带Bearer Token调用接口时，返回数据结构如下：

[
    {
        "uid": 2,
        "name": "cus",
        "email": "cus@gmail.com",
        "isEnabled": true,
        "role": "CUSTOMER"
    }
]

问题解答 #

1. 配置携带Bearer Token并渲染后端数据 #

按以下步骤实现：

• 自定义HTTP客户端：给请求添加Bearer Token，同时兼容react-admin的请求格式要求。
• 适配后端返回结构：React-Admin默认期望响应包含data字段，而Spring Boot直接返回数组，需转换格式并将后端的uid映射为框架要求的id字段。
• 编写对应列表组件：根据后端返回的字段配置表格列。

示例代码：

import { Admin, Resource, List, Datagrid, TextField } from 'react-admin';
import { fetchUtils, jsonServerProvider } from 'ra-data-json-server';

// 自定义HTTP客户端，添加Authorization头
const httpClient = (url, options = {}) => {
  options.headers = options.headers || {};
  const token = localStorage.getItem('jwtToken');
  if (token) {
    options.headers['Authorization'] = `Bearer ${token}`;
  }
  // 确保Accept头正确
  options.headers['Accept'] = 'application/json';
  return fetchUtils.fetchJson(url, options);
};

// 适配Spring Boot的纯数组返回格式
const baseDataProvider = jsonServerProvider('http://localhost:8080/api/v1', httpClient);
const dataProvider = {
  ...baseDataProvider,
  getList: (resource, params) => {
    return baseDataProvider.getList(resource, params).then(response => {
      if (Array.isArray(response.data)) {
        return {
          data: response.data.map(item => ({ ...item, id: item.uid })),
          total: response.data.length,
        };
      }
      return response;
    });
  },
};

// 用户列表组件
export const UserList = () => {
  return (
    <List>
      <Datagrid>
        <TextField source="uid" label="ID" />
        <TextField source="name" />
        <TextField source="email" />
        <TextField source="role" />
      </Datagrid>
    </List>
  );
};

// 渲染Admin组件
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={UserList} />
  </Admin>
);

export default App;

2. 适配后端用户接口并解决路由报错 #

• 替换Resource配置：将原name="posts"改为后端用户接口对应的名称（比如name="users"，对应接口/api/v1/users），并替换为UserList组件。
• 设置默认路由：若移除所有Resource后出现路由报错，可添加默认首页或指定初始路由：

  import { Dashboard } from 'react-admin';
  
  const App = () => (
    <Admin dataProvider={dataProvider} dashboard={Dashboard} initialRoute="/users">
      <Resource name="users" list={UserList} />
    </Admin>
  );
  

  配置dashboard可添加默认首页，initialRoute指定加载时直接跳转至用户列表。

3. 排查HTTP客户端配置未生效的原因 #

逐一检查以下项：

• Token有效性：确认localStorage.getItem('jwtToken')能获取到有效Token，键名与登录时存储的一致（比如是否误写为token而非jwtToken）。
• Headers赋值方式：react-admin的fetchUtils.fetchJson接受普通对象作为headers，用options.headers['Authorization']赋值而非Headers实例的set方法。
• 数据提供者传入：确保Admin组件的dataProvider属性使用的是配置了自定义httpClient的实例。
• 接口路径匹配：Resource的name会拼接在base URL后，比如name="users"对应请求http://localhost:8080/api/v1/users，确认后端存在该接口。
• 查看Network请求：打开浏览器开发者工具的Network面板，检查请求头是否包含Authorization: Bearer xxx，若没有则说明httpClient未被正确调用。

4. 替代方案推荐 #

若React-Admin配置复杂，可选择以下方案：

• Refine：开箱即用的React Admin框架，原生支持JWT鉴权，适配Spring Boot等多种后端，提供完善的数据管理与UI组件，上手成本低。
• Material-UI X Data Grid + Axios：若需高度定制，可使用Material-UI的数据网格组件，配合Axios封装HTTP请求自行实现鉴权与数据渲染，灵活性更高。

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