低代码表单FormCreate中为了确保所有的接口请求都包含认证 Token，您可以重写内置的请求方法，并在请求前动态地设置 Token。这不仅确保了请求的安全性，也使得 Token 的管理更加集中和一致。
源码地址: Github | Gitee | 帮助文档
重写内置请求方法并设置 Token
您可以自定义 formCreate.fetch 方法，以便在每次请求时自动附加 Token。
formCreate.fetch = (options) => {// 获取或生成 Tokenconst token = 'your-auth-token'; // 这里的 token 可以从 Vuex、localStorage 或其他地方获取// 设置请求头，附加 Authorization tokenconst headers = {...options.headers,Authorization: `Bearer ${token}`,};// 发起请求fetch(options.action, {method: options.method || 'GET', // 默认请求方法为 GETheaders: headers, // 包含 Authorization 的请求头body: options.method !== 'GET' ? JSON.stringify(options.data) : null, // 如果是 POST 或其他方法，添加请求体}).then(response => response.json()) // 解析响应为 JSON.then(data => {if (options.onSuccess) {options.onSuccess(data); // 成功回调}}).catch(error => {if (options.onError) {options.onError(error); // 失败回调}});
};
在请求前设置 Token
通过 beforeFetch 钩子，您可以在每次请求发送前设置 Token。以下是如何在 Vue 组件中使用这个钩子：
<template><form-create :rule="rule" v-model:api="fApi" :option="options" />
</template><script setup>import { ref } from 'vue';const fApi = ref({});const options = {// 在请求发送前的钩子beforeFetch: (options) => {// 动态设置请求头中的 Authorization tokenconst token = 'your-auth-token'; // 这里的 token 可以从任何存储中获取options.headers = {Authorization: `Bearer ${token}`};}};const rule = [{type: 'select',field: 'product',title: '选择产品',fetch: {action: '/api/products',to: 'options',parse: (res) => res.data.map(product => ({ label: product.name, value: product.id })),onError: (error) => console.error('加载产品数据失败:', error),},}];
</script>