如何在react-form-builder2中为请求添加Authorization Token

react-form-builder2 提供两种实用方式给保存请求添加Authorization令牌，你可以根据项目实际情况选择：

方案一：利用组件内置的请求头配置 #

如果你的表单构建器直接使用组件自带的保存API调用，可以通过组件的请求头相关props传入令牌。多数版本的组件会提供类似requestHeaders的配置参数：

import FormBuilder from 'react-form-builder2';

export default function CustomFormBuilder() {
  // 从项目状态管理或本地存储获取令牌，示例用localStorage
  const authToken = localStorage.getItem('user_auth_token');

  return (
    <FormBuilder
      saveUrl="/your-backend-api/form/save"
      // 传入自定义请求头
      requestHeaders={{
        Authorization: `Bearer ${authToken}`
      }}
      // 其他必填props，比如formData、onSaveSuccess等
    />
  );
}

方案二：自定义保存逻辑（完全控制请求） #

如果组件没有直接的请求头配置项，或者你需要更灵活的请求控制，可以重写保存回调，自行发起请求：

import FormBuilder from 'react-form-builder2';
import axios from 'axios';

export default function CustomFormBuilder() {
  const authToken = localStorage.getItem('user_auth_token');

  const handleFormSave = (formData) => {
    // 拿到表单构建器生成的结构数据，自行发起POST请求
    axios.post('/your-backend-api/form/save', formData, {
      headers: {
        Authorization: `Bearer ${authToken}`
      }
    })
    .then(res => {
      console.log('表单保存成功:', res.data);
      // 这里可以添加成功提示、页面跳转等逻辑
    })
    .catch(err => {
      console.error('表单保存失败:', err);
      // 处理错误逻辑
    });
  };

  return (
    <FormBuilder
      // 传入自定义保存回调
      onSave={handleFormSave}
      // 禁用组件内置的保存逻辑（如果组件支持该参数）
      disableDefaultSave={true}
      // 其他必填props
    />
  );
}

注意事项 #

• 令牌的获取方式根据项目架构调整，比如从Redux Store、React Context或者接口响应中获取，确保令牌处于有效状态
• 注意后端要求的令牌格式，多数场景是Bearer ${token}，如果后端要求其他格式（比如直接传token），对应调整Authorization的值
• 如果上述props和你的组件版本不匹配，直接查看react-form-builder2的官方文档，确认请求配置相关的参数或回调方法

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